第一种轮播图：将所有的图片横排着放，然后利用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>
