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

最新推荐文章于 2023-02-20 15:17:07 发布

dengweihuan4949

最新推荐文章于 2023-02-20 15:17:07 发布

阅读量214

点赞数

原文链接：http://www.cnblogs.com/cq1715584439/p/10553605.html

版权

实现这种淡入淡出的轮播关键在于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.οnclick=()=>{
41                 this.count=index
42                 this.change(index)
43             }
44         })
45     }
46     mouse(){
47         //鼠标移入停止定时器 离开继续
48         this.box.οnmοuseοver=()=>{
49             clearInterval(this.timer)
50         }
51         this.box.οnmοuseοut=()=>{
52             this.autoplay()
53         }
54     }
55 }

转载于:https://www.cnblogs.com/cq1715584439/p/10553605.html

dengweihuan4949

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现简单轮播的淡入淡出效果

实现这种淡入淡出的轮播关键在于css的一种设置首先它不能像传统的轮播显示隐藏或者左右浮动他应该让其固定定位使其重叠在一起达到这种效果然后设置c3动画属性 transition:1s;具体代码如下请君欣赏 1 * { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 }...
复制链接

扫一扫