1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>slide</title>
6 <style>
7 * {margin:0;padding: 0;}
8 .wrap {position: relative;width: 520px;overflow: hidden; margin:0 auto;}
9 .container {position: relative;width: 3120px;overflow: hidden;left: 0;}
10 .item {float: left;width: 520px;overflow: hidden;cursor: pointer;}
11 .dot {position: absolute;right: 10px;bottom: 10px;overflow: hidden;}
12 .dot .cur{background: black;}
13 .dot span {display: block;float: left;width: 16px;height: 16px;margin-left:8px;border-radius: 8px;background: #fff;cursor: pointer;}
14 .left, .right{position: absolute;top: 100px;cursor: pointer; display:none;}
15 .left{left: 0; }
16 .right{right: 0;}
17
18 </style>
19 </head>
20 <body>
21 <div class="wrap">
22 <div class="container">
23 <div class="item">
24 <img src="1.jpg" alt="">
25 </div>
26 <div class="item">
27 <img src="2.jpg" alt="">
28 </div>
29 <div class="item">
30 <img src="3.jpg" alt="">
31 </div>
32 <div class="item">
33 <img src="4.jpg" alt="">
34 </div>
35 <div class="item">
36 <img src="5.jpg" alt="">
37 </div>
38
39 <div class="item">
40 <img src="1.jpg" alt="">
41 </div>
42 </div>
43 <div class="dot">
44 <span class="cur"></span>
45 <span></span>
46 <span></span>
47 <span></span>
48 <span></span>
49 </div>
50
51 <div class="left"><img src="left.png" alt=""></div>
52 <div class="right"><img src="right.png" alt=""></div>
53
54 </div>
55 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
56 <script>
57 jQuery(document).ready(function($) {
58 var count = 0,
59 timer;
60
61 var bindTimer = function(){
62 timer = setInterval(function(){
63 count ++;
64 $('.dot span').eq(count%5).addClass('cur').siblings().removeClass('cur');
65 // 图片轮播动画
66 $('.container').animate({
67 left: '-'+(count*520)+'px',},
68 200, function() {
69 if (count === 5) {
70 $('.container').css('left', '0');
71 count = 0;
72 }
73 });
74
75 },2000);
76 $(".dot span").click(function(event) {
77
78 $(this).addClass('cur').siblings('').removeClass('cur')
79 });
80 };
81
82 bindTimer();
83
84 $('.dot').on('click', 'span', function(event) {
85 clearInterval(timer);
86 var index = $(this).index('.dot span');
87 count = index;
88 $('.container').animate({
89 left: '-'+(count*520)+'px',},
90 200, function() {
91 bindTimer();
92 });
93
94
95 });
96
97
98 $('.item').mouseover(function(event) {
99 clearInterval(timer);
100 }).mouseout(function(event) {
101 bindTimer();
102 });
103
104
105
106
107
108 //划入显示左右箭头
109 $(".wrap").mouseover(function(event) {
110 $(".left").show()
111 }).mouseout(function(event) {
112 $(".left").hide()
113 });
114
115 $(".wrap").mouseover(function(event) {
116 $(".right").show()
117 }).mouseout(function(event) {
118 $(".right").hide()
119 });
120
121
122 //左右按钮轮播
123 var $index=0;
124
125 $(".right").click(function(){
126 clearInterval(timer);
127 $index++;
128 if($index>4){
129 $index=0
130 }
131 $(".dot span").eq($index).addClass("cur").siblings().
132 removeClass("cur");
133 $('.container').stop().animate({
134 left: '-'+($index*520)+'px'},
135 200);
136
137
138 });
139
140 $(".left").click(function(){
141 clearInterval(timer);
142 $index--;
143 if($index<0){
144 $index=4
145 }
146 $(".dot span").eq($index).addClass("cur").siblings().
147 removeClass("cur");
148 $('.container').stop().animate({
149 left: '-'+($index*520)+'px'},
150 200);
151
152 });
153
154
155
156
157
158
159
160
161 });
162 </script>
163 </body>
164 </html>