示意图:
demo
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>首页</title>
6 <style>
7 *{margin:0px;padding:0px;}
8 .wrap{width:700px;height:400px;margin:50px auto 0;position: relative;}
9 .imgList img{width:700px;height:400px;position: absolute;left:0px;top:0px;}
10 .btn {width:200px;height:20px;position: absolute;bottom: 10px;right:250px;}
11 .btn ul li{width:18px;height:18px;border: 1px solid #ddd;list-style: none;border-radius: 9px;float: left;margin:0 6px;
12 background: #3DB1FA;color: #ddd;text-align: center;cursor: pointer;}
13 .btn ul li:hover{background: #0e23f0}
14 .btn ul li.hov{background: #0e23f0}
15 .btnL{position: absolute;left:20px;top:150px;width:50px;height:100px;line-height: 100px;font-size: 60px;color: #ddd;text-align: center;cursor: pointer}
16 .btnR{position: absolute;right:20px;top:150px;width:50px;height:100px;line-height: 100px;font-size: 60px;color: #ddd;text-align: center;cursor: pointer;}
17 .btnL:hover,.btnR:hover{background: rgba(0,0,0,.3)}
18 </style>
19 </head>
20 <body>
21 <div class="wrap">
22 <div class="imgList">
23 <img src="img/1.jpg" alt="" style="display: block">
24 <img src="img/2.jpg" alt="" style="display: none">
25 <img src="img/3.jpg" alt="" style="display: none">
26 <img src="img/4.jpg" alt="" style="display: none">
27 <img src="img/5.jpg" alt="" style="display: none">
28 </div>
29 <div class="btn">
30 <ul>
31 <li class="hov"></li>
32 <li></li>
33 <li></li>
34 <li></li>
35 <li></li>
36 </ul>
37 </div>
38 <div class="btnL"><</div>
39 <div class="btnR">></div>
40 </div>
41 <script src="../lib/jquery-1.12.2.js"></script>
42 <script>
43 var timer = null;
44 var _index = 0;
45
46
47 //小圆点hover切换
48 $('.btn>ul>li').hover(function () {
49 clearInterval(timer);
50 _index = $(this).index();
51 changImg(_index);
52 },function () {
53 autoPlay();
54 });
55
56 //左右切图
57 $('.btnR').click(function () {
58 clearInterval(timer);
59 _index++;
60 if(_index >4) {
61 _index = 0;
62 }
63 changImg(_index);
64 });
65
66 $('.btnL').click(function () {
67 clearInterval(timer);
68 _index--;
69 if(_index < 0) {
70 _index = 4;
71 }
72 changImg(_index);
73
74 });
75 $('.btnR,.btnL').hover(function () {
76 clearInterval(timer);
77 },function () {
78 autoPlay();
79 });
80
81 function changImg(_index) {
82 $('.btn>ul>li').eq(_index).addClass('hov').siblings('li').removeClass('hov');
83 $('.imgList>img').eq(_index).stop().fadeIn().siblings('img').stop().hide();
84 }
85 // 自动轮播
86 function autoPlay() {
87 timer = setInterval(function () {
88 _index++;
89 if(_index >4) {
90 _index = 0;
91 }
92 changImg(_index);
93 },2000);
94 }
95
96 autoPlay();
97
98 </script>
99 </body>
100 </html>
