实现这种淡入淡出的轮播关键在于css的一种设置 首先它不能像传统的轮播显示隐藏 或者左右浮动
他应该让其固定定位使其重叠在一起 达到这种效果 然后设置c3动画属性 transition:1s;
具体代码如下 请君欣赏
1 * { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 } 6 7 body { 8 width: 100%; 9 height: 100%; 10 background-color: #666; 11 } 12 13 .container { 14 width: 650px; 15 height: 236px; 16 margin: 100px auto; 17 position: relative; 18 } 19 20 .container ul { 21 width: 650px; 22 height: 236px; 23 } 24 25 .container ul li { 26 width: 100%; 27 height: 100%; 28 position: absolute; 29 left: 0; 30 top: 0; 31 transition: 2s; 32 opacity: 0; 33 } 34 35 .container ul li img { 36 width: 100%; 37 height: 100%; 38 } 39 40 .container ul li:nth-child(1) { 41 opacity: 100; 42 } 43 44 .container ol { 45 position: absolute; 46 left: 50%; 47 bottom: 10px; 48 transform: translate(-50%, 0); 49 } 50 51 .container ol li { 52 float: left; 53 margin: 0 10px; 54 } 55 56 .container ol li a { 57 width: 15px; 58 height: 15px; 59 background-color: #666; 60 display: inline-block; 61 border-radius: 50%; 62 } 63 64 .container ol a.active { 65 background: yellow; 66 }
HTML部分
1 <body> 2 <div class="container"> 3 <ul> 4 <li><img src="./img/1.jpg" alt=""></li> 5 <li><img src="./img/2.jpg" alt=""></li> 6 <li><img src="./img/3.jpg" alt=""></li> 7 <li><img src="./img/4.jpg" alt=""></li> 8 <li><img src="./img/5.jpg" alt=""></li> 9 <li><img src="./img/6.jpg" alt=""></li> 10 </ul> 11 <ol> 12 <li><a class="active" href="#1"></a></li> 13 <li><a href="#1"></a></li> 14 <li><a href="#1"></a></li> 15 <li><a href="#1"></a></li> 16 <li><a href="#1"></a></li> 17 <li><a href="#1"></a></li> 18 </ol> 19 </div> 20 <script src="./js/index.js"></script> 21 <script> 22 new Container(); 23 </script> 24 </body>
JS部分
1 class Container{ 2 constructor(){ 3 this.oli=document.querySelectorAll("ul li"); 4 this.ball=document.querySelectorAll("a"); 5 this.box=document.querySelector(".container"); 6 this.timer=null; 7 this.count=0; 8 this.init() 9 } 10 init(){ 11 this.autoplay(); 12 this.click(); 13 this.mouse() 14 } 15 autoplay(){ 16 this.timer=setInterval(()=>{ 17 this.count++; 18 if(this.count==this.oli.length){ 19 this.count=0; 20 } 21 this.change(this.count); 22 },2000) 23 } 24 change(index){ 25 this.oli.forEach((item,i)=>{ 26 item.style.opacity=0; 27 28 this.ball[i].classList.remove("active"); 29 30 31 }); 32 33 this.oli[index].style.opacity=1; 34 35 this.ball[index].classList.add("active") 36 } 37 click(){ 38 //小圆点的点击事件 39 this.ball.forEach((item,index)=>{ 40 item.onclick=()=>{ 41 this.count=index 42 this.change(index) 43 } 44 }) 45 } 46 mouse(){ 47 //鼠标移入停止定时器 离开继续 48 this.box.onmouseover=()=>{ 49 clearInterval(this.timer) 50 } 51 this.box.onmouseout=()=>{ 52 this.autoplay() 53 } 54 } 55 }