标签：
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>
标签：
原文地址：http://www.cnblogs.com/below/p/4704527.html
