原生js实现简单轮播的淡入淡出效果

实现这种淡入淡出的轮播关键在于css的一种设置首先它不能像传统的轮播显示隐藏或者左右浮动

他应该让其固定定位使其重叠在一起达到这种效果然后设置c3动画属性 transition:1s;

具体代码如下请君欣赏

 * {

   margin:;

   padding:;

   list-style: none;

 }

 body {

   width: 100%;

   height: 100%;

   background-color: #666;

 }

 .container {

   width: 650px;

   height: 236px;

   margin: 100px auto;

   position: relative;

 }

 .container ul {

   width: 650px;

   height: 236px;

 }

 .container ul li {

   width: 100%;

   height: 100%;

   position: absolute;

   left:;

   top:;

   transition: 2s;

   opacity:;

 }

 .container ul li img {

   width: 100%;

   height: 100%;

 }

 .container ul li:nth-child(1) {

   opacity:;

 }

 .container ol {

   position: absolute;

   left: 50%;

   bottom: 10px;

   transform: translate(-50%, 0);

 }

 .container ol li {

   float: left;

   margin: 0 10px;

 }

 .container ol li a {

   width: 15px;

   height: 15px;

   background-color: #666;

   display: inline-block;

   border-radius: 50%;

 }

 .container ol a.active {

   background: yellow;

 }

HTML部分

 <body>

     <div class="container">

         <ul>

             <li><img src="./img/1.jpg" alt=""></li>

             <li><img src="./img/2.jpg" alt=""></li>

             <li><img src="./img/3.jpg" alt=""></li>

             <li><img src="./img/4.jpg" alt=""></li>

             <li><img src="./img/5.jpg" alt=""></li>

             <li><img src="./img/6.jpg" alt=""></li>

         </ul>

         <ol>

             <li><a  class="active" href="#1"></a></li>

             <li><a href="#1"></a></li>

             <li><a href="#1"></a></li>

             <li><a href="#1"></a></li>

             <li><a href="#1"></a></li>

             <li><a href="#1"></a></li>

         </ol>

     </div>

     <script src="./js/index.js"></script>

     <script>

         new Container();

     </script>

 </body>

JS部分

 class Container{

     constructor(){

         this.oli=document.querySelectorAll("ul li");

         this.ball=document.querySelectorAll("a");

         this.box=document.querySelector(".container");

         this.timer=null;

         this.count=0;

         this.init()

     }

     init(){

         this.autoplay();

         this.click();

         this.mouse()

     }

     autoplay(){

         this.timer=setInterval(()=>{

             this.count++;

             if(this.count==this.oli.length){

                 this.count=0;

             }

             this.change(this.count);

         },2000)

     }

     change(index){

         this.oli.forEach((item,i)=>{

             item.style.opacity=0;

             this.ball[i].classList.remove("active");

         });

          this.oli[index].style.opacity=1;

         this.ball[index].classList.add("active")

     }

     click(){

         //小圆点的点击事件

         this.ball.forEach((item,index)=>{

             item.onclick=()=>{

                 this.count=index

                 this.change(index)

             }

         })

     }

     mouse(){

         //鼠标移入停止定时器 离开继续

         this.box.onmouseover=()=>{

             clearInterval(this.timer)

         }

         this.box.onmouseout=()=>{

             this.autoplay()

         }

     }

 }

巴特西

原生js实现简单轮播的淡入淡出效果

最新文章

热门文章