1 <html>
2 <head>
3
4
5 <script type="text/javascript" src="js/jquery-1.4.4.js"></script>
6 <style>
7 .out{
8 position:relative;
9 margin:200px auto;
10
11 height:200px;
12
13 width:600px;
14
15 }
16 .show{
17
18 float:left;
19 width:400px;
20 height:200px;
21 overflow: hidden;
22 position:relative;
23
24 }
25 .out:hover .right,.out:hover .left{
26 display:block;
27
28 }
29
30 .cont{
31 left:0px;
32 top:0px;
33 position:absolute;
34 width:4000px;
35
36 }
37 .cont ul {
38 padding:0;
39
40 float:left;
41 }
42 .cont ul li{
43 text-align: center;
44 width:400px;
45 float:left;
46 height:200px;
47 }
48
49 .left{
50 border:1px blue solid;
51 background-color:red;
52 width:50px;
53 height:45px;
54 float:left;
55 display:none;
56 margin:90px -50px 0 0 ;
57 z-index:100;
58 position:absolute;
59 }
60 .right{
61 border:1px blue solid;
62 background-color:red;
63 position:absolute;
64 display:none;
65 width:50px;
66 height:45px;
67 float:left;
68 margin:90px 0 0 350px ;
69 z-index:100;
70 }
71
72
73
74 /***circle**/
75 .circle{
76 left:35px;
77 position:absolute;
78 top:300px;
79 padding-left: 0;
80 }
81 .circle .circle-current{
82 background-color: red;
83 }
84 .circle li{
85 cursor:pointer;
86 line-height: 30px;
87 text-align: center;
88 margin-left:20px;
89 float:left;
90 list-style-type:none;
91 width:30px;
92 height:30px;
93 border-radius:30px;
94 background-color:black;
95 }
96 </style>
97
98 </head>
99 <body>
100
101
102 <div class="out">
103
104 <div class="left" ><a href="javascript:void(0)">left</a></div>
105
106 <div class="show" >
107 <div class="cont">
108 <ul>
109 <li index = 0 style="background-color: blue;"><img src="picture/1.jpg" width="400px"></li>
110 <li index = 1 style="background-color:red;"><img src="picture/2.jpg" width="400px"></li>
111 <li index = 2 style="background-color:green;"><img src="picture/3.jpg" width="400px"></li>
112 <li index = 3 style="background-color:black;"><img src="picture/4.jpg" width="400px"></li>
113 <li index = 4 style="background-color:yellow;"><img src="picture/5.jpg" width="400px"></li>
114 <li index = 5 style="background-color:peru;"><img src="picture/6.jpg" width="400px"></li>
115 </ul>
116
117 </div>
118 </div>
119 <div class="right" ><a href="javascript:void(0)">right</a></div>
120
121 <ul class="circle">
122 <li class="circle-current">1</li>
123 <li>2</li>
124 <li>3</li>
125 <li>4</li>
126 <li>5</li>
127 <li>6</li>
128 </ul>
129
130
131
132 </div>
133
134 <script>
135 $(function(){
136 $(".right").click(function(){
137 var a=$(".cont");
138
139 //不加stop()的话按快了的话过程动画会直接没了
140 a.stop().animate({left:$(".cont ul li").width()*-1},"slow",function(){
141 var first=a.find("li").first();
142
143 a.find("ul").append(first);
144 a.css("left","0px");
145 circle();
146
147 })
148
149 })
150
151 var x=true;
152 $(".left").click(function(){
153 if(x==true) {
154 x=false;
155
156 var a = $(".cont");
157 var last = a.find("li").last();
158 a.find("ul").prepend(last);
159 a.css("left", $(".cont ul li").width() * -1);
160 // setTimeout(function(){
161 // alert(123);
162 // },3000);
163
164 a.stop().animate({left: "0px"}, "slow", function () {
165 circle();
166 x = true;
167 });
168
169 }
170
171 })
172
173 var y=true;
174 $(".circle li").click(function(){
175 if(y==false){return 0;}
176 //不用circle();
177 $(".circle li").removeClass("circle-current");
178 $(this).addClass("circle-current");
179 //$(this).addClass("circle-current").siblings().removeClass("circle-current");//或者用这个；siblings()兄弟节点
180
181
182 var nextindex=$(this).index();
183 var nowindex=$(".cont li").first().attr("index");//关键！！并不能用index() 因为index()已经改动了
184 // alert(nowindex);
185 // alert(nextindex);
186 if(nextindex<nowindex)
187 {
188 var cha= nowindex-nextindex;
189
190 for(var i=0;nowindex-nextindex>i;i++)
191 {
192
193 var lastnode=$(".cont li").last();
194 $(".cont ul").prepend(lastnode);
195
196 // alert($(".cont li").first());
197
198 }
199 $(".cont").css("left", $(".cont ul li").width() * -(cha));
200
201 if(y==true)
202 {
203 y=false;
204 $(".cont").stop().animate({left: "0px"}, "slow", function () {
205 y = true;
206 });
207 }
208 }
209 if(nextindex>nowindex)
210 {
211 if(y==true) {
212 y=false;
213
214 var cha= nextindex-nowindex;
215 $(".cont").stop().animate({left: $(".cont ul li").width() * -(cha)}, "slow", function () {
216 for(var i=0;nextindex-nowindex>i;i++)
217 {
218
219 var firstnode=$(".cont li").first();
220 $(".cont ul").append(firstnode);
221
222 // alert($(".cont li").first());
223
224 }
225 $(".cont").css({left:0});
226 y = true;
227 });
228
229
230
231
232 }
233 }
234
235 })
236
237
238 //改变circle样式
239
240 function circle(){
241
242 var nownode=$(".cont li").first();
243 // alert(nownode.attr("index"));
244 var currentcircleIndex=nownode.attr("index");
245 $(".circle li").removeClass("circle-current");
246 $(".circle li").eq(currentcircleIndex).addClass("circle-current");
247
248 }
249
250
251 })
252 </script>
253 </body>
254 </html>