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

实现这种淡入淡出的轮播关键在于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 }

 

posted @ 2019-03-18 17:34  嗨,陈强  阅读(345)  评论(0编辑  收藏  举报