轮播图的实现

Posted shuangcherry

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轮播图的实现相关的知识,希望对你有一定的参考价值。

第一种轮播图:将所有的图片横排着放,然后利用overflow:hidden,一次只展示一张图片,然后定时向左移动,来实现图片轮播。代码如下:

html结构和css样式:

 1 <style>
 2         .pic-box{
 3             width:600px;
 4             height:400px;
 5             margin:100px auto;
 6             overflow:hidden;
 7             position:relative;
 8         }
 9         .pic{
10             width:3600px;
11             position:absolute;
12             left:0;
13             top:0;
14             list-style: none;
15             margin:0;
16             padding:0;
17         }
18         .pic li{
19             width:600px;
20             height:400px;
21             float:left;
22             list-style: none;
23         }
24         li img{
25             width:600px;
26             height:400px;
27         }
28         .btns{
29             position:absolute;
30             right:5%;
31             bottom:5px;
32         }
33         .btn{
34             display: inline-block;
35             width:10px;
36             height:10px;
37             border-radius: 50%;
38             border:1px solid #999999;
39         }
40         .btn:hover{
41             cursor:pointer;
42         }
43         .selected{
44             background: #009cda;
45         }
46         .pre-btn{
47             position:absolute;
48             top:50%;
49             left:10px;
50             display: inline-block;
51             width:20px;
52             height:20px;
53             margin-top:-10px;
54             background: rgba(255,255,180,0.8);
55             text-align: center;
56         }
57         .next-btn{
58             position:absolute;
59             top:50%;
60             right:10px;
61             display: inline-block;
62             width:20px;
63             height:20px;
64             margin-top:-10px;
65             background: rgba(255,255,180,0.8);
66             text-align: center;
67         }
68         .pre-btn:hover,.next-btn:hover{
69             cursor:pointer;
70         }
71     </style>
72 </head>
73 <body>
74         <div class="pic-box">
75             <ul class="pic">
76                 <li><img src="img/13.jpg"></li>
77                 <li><img src="img/14.jpg"></li>
78                 <li><img src="img/24.jpg"></li>
79                 <li><img src="img/16.jpg"></li>
80                 <li><img src="img/18.jpg"></li>
81                 <li><img src="img/19.jpg"></li>
82             </ul>
83             <div class="btns">
84                 <span class="btn selected"></span>
85                 <span class="btn"></span>
86                 <span class="btn"></span>
87                 <span class="btn"></span>
88                 <span class="btn"></span>
89                 <span class="btn"></span>
90             </div>
91             <span class="pre-btn"><img src="img/before.png"></span>
92             <span class="next-btn"><img src="img/next.png"></span>
93         </div>

js代码:

 1 <script src="jquery-3.2.1.min.js"></script>
 2         <script>
 3             /*图片滚动函数*/
 4             var i=0;//记录当前图片的顺序
 5             var timer;//定时器变量
 6             $pics=$(".pic>li");
 7             $pic=$(‘.pic‘);
 8             $pages=$pics.length;
 9             $width=$pic.width()/$pages;
10             $btns=$(".btns>.btn");
11             //定时轮播
12             function animate(){
13                 clearTimeout(timer);
14                 if(!$pic.is(":animated")){
15                     if(i<$pages-1){
16                         $pic.animate({left:‘-=‘+$width},"normal");//将图片向左移动一张,也可以换成其他效果。
17                         i++;
18                     }
19                     else{
20                         $pic.animate({left:0},"normal");
21                         i=0;
22                     }
23                     $btns.eq(i).addClass("selected").siblings().removeClass("selected");
24                 }
25                 timer=setTimeout(animate,4000);
26             }
27             timer=setTimeout(animate,4000);
28             //点击上一张,则播放上一张图片
29             $(".pre-btn").click(function(){
30                 clearTimeout(timer);
31                 if(!$pic.is(":animated")){
32                     if(i>0){
33                         $pic.animate({left:‘+=‘+$width},"normal");
34                         i--;
35                     }
36                     else{
37                         $pic.animate({left:-$width*($pages-1)},"normal");
38                         i=$pages-1;
39                     }
40                     $btns.eq(i).addClass("selected").siblings().removeClass("selected");
41                 }
42                 timer=setTimeout(animate,4000);
43             });
44             //点击下一张按钮,则播放下一张图片
45             $(".next-btn").click(function(){
46                 clearTimeout(timer);
47                 if(!$pic.is(":animated")){
48                     if(i<$pages-1){
49                         $pic.animate({left:‘-=‘+$width},"normal");
50                         i++;
51                     }
52                     else{
53                         $pic.animate({left:0},"normal");
54                         i=0;
55                     }
56                     $btns.eq(i).addClass("selected").siblings().removeClass("selected");
57                 }
58                 timer=setTimeout(animate,4000);
59             });
60             //点击小圆圈时,播放小圆圈所代表的图片
61             $btns.each(function(index){
62                 $(this).click(function(){
63                     clearTimeout(timer);
64                     if(!$pic.is(":animated")){
65                         $pic.animate({left:-$width*index},"normal");
66                         i=index;
67                         $(this).addClass("selected").siblings().removeClass("selected");
68                     }
69                     timer=setTimeout(animate,4000);
70                 })
71                 
72             })
73         </script>

第二种轮播方式是:所有图片都堆叠在一起,然后定时显示一张图片,隐藏其它图片来实现轮播,js代码如下:(html结构不变,改变css布局,使图片堆叠在一起)

 1 <script src="jquery-3.2.1.min.js"></script>
 2         <script>
 3             /*图片滚动函数*/
 4             var i=0;//记录当前图片的顺序
 5             var timer;//定时器变量
 6             var pic=$(".pic");
 7             $pics=$(‘.pic>li‘);
 8             var pages=$pics.length;
 9             $btns=$(".btns>.btn");
10             //定时轮播
11             function animate(){
12                 clearTimeout(timer);
13                 $pics.eq(i).fadeOut();
14                 if(i<pages-1){
15                     i++;
16                 }else{
17                     i=0;
18                 }
19                 $pics.eq(i).fadeIn();
20                  $btns.eq(i).addClass(‘selected‘).siblings().removeClass(‘selected‘);
21                 timer=setTimeout(animate,1000);
22             }
23             timer=setTimeout(animate,1000);
24             //点击上一张,则播放上一张图片
25             $(".pre-btn").click(function(){
26                 clearTimeout(timer);
27                 $pics.eq(i).fadeOut();
28                 if(i>0){
29                     i--;
30                 }else{
31                     i=pages-1;
32                 }
33                 $pics.eq(i).fadeIn();
34                 $btns.eq(i).addClass(‘selected‘).siblings().removeClass(‘selected‘);
35                 timer=setTimeout(animate,1000);
36             });
37             //点击下一张按钮,则播放下一张图片
38             $(".next-btn").click(function(){
39                clearTimeout(timer);
40                 $pics.eq(i).fadeOut();
41                 if(i==pages-1){
42                     i=0;
43                 }else{
44                     i++;
45                 }
46                 $pics.eq(i).fadeIn();
47                 $btns.eq(i).addClass(‘selected‘).siblings().removeClass(‘selected‘);
48                 timer=setTimeout(animate,1000);
49             });
50             //点击小圆圈时,播放小圆圈所代表的图片
51            $btns.each(function(index){
52                    $(this).click(function(){
53                        clearTimeout(timer);
54                        if(i!==index){
55                            $pics.eq(i).fadeOut();
56                            $pics.eq(index).fadeIn();
57                            $btns.eq(index).addClass(‘selected‘).siblings().removeClass(‘selected‘);
58                        }
59                        i=index;
60                        timer=setTimeout(animate,1000);
61                    });
62            })
63         </script>

 

以上是关于轮播图的实现的主要内容,如果未能解决你的问题,请参考以下文章

简单轮播图的实现及原理讲解(js)

js原生 JavaScript轮播图渐变淡入淡出效果实现(附代码)

轮播图的实现

js实现效果:循环轮播图

3d轮播图的效果实现

使用JS实现轮播图的效果