1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 #box{width:600px;height:400px;margin:0 auto;position:relative;overflow:hidden;} 9 #box .con{width:3600px;height:400px;position:absolute;left:0;top:0;} 10 #box .con img{float:left;} 11 #box ul{position:absolute;bottom:0;right:0;} 12 #box ul li{list-style:none;float:left;margin-left:1px;width:80px;height:26px;line-height:26px; 13 color:#fff;text-align:center;background:red;opacity:0.7;} 14 15 </style> 16 <script src="js/jquery.1.9.1.js" type="text/javascript" charset="utf-8"></script> 17 <script type="text/javascript"> 18 $(function(){ 19 //大总管变量默认值为0，即第一项 20 var c=0; 21 //1代表不能点击，2代表能点击 22 var sta=2; 23 24 25 //无缝滚动定时器 26 function run(){ 27 c++; 28 //当C=6，找到ul，把left重置为0,c为1 29 30 if(c==6){ 31 $("#box .con").css({'left':'0'}); 32 c=1; 33 } 34 var l=c*-600; //600为每张图片的宽度 35 sta=1;//定时器轮播时，不能点击 36 //con元素向左移动,运动前要加stop() 37 $("#box .con").animate({"left":l+"px"},400,function(){ 38 //执行完动画，将sta转为可以点击 39 sta=2; 40 }); 41 42 if(c==5){ 43 $('#box ul li').eq(0).css({'opacity':'0.9'}).siblings().css({'opacity':'0.7'}); 44 }else{ 45 //让当前的li透明度为0.9，兄弟li为0.7 46 $("#box ul li").eq(c).css({'opacity':'0.9'}).siblings().css({'opacity':'0.7'}); 47 } 48 49 } 50 51 //全局变量timer 52 var timer=setInterval(run,1000); 53 var t; 54 55 56 //给li添加单击切换效果 57 $('#box ul li').click(function(){ 58 if(sta==1){//不能点击 59 return; //后面代码不执行，返回 60 } 61 //清理定时炸弹 62 clearTimeout(t); 63 //点击时候，先清理定时器 64 clearInterval(timer); 65 t=setTimeout(function(){ 66 timer=setInterval(run,2000); 67 },400) 68 //获得当前被点击li的序号 69 c=$(this).index(); 70 //计算大DIV应该到达的Left的值 71 var left=c*-600; 72 //con元素向左移动,运动前要加stop() 73 74 $("#box .con").stop().animate({"left":left+"px"},300); 75 //让当前的li透明度为0.9，兄弟li为0.7 76 $(this).css({'opacity':'0.9'}).siblings().css({'opacity':'0.7'}); 77 }) 78 }) 79 </script> 80 </head> 81 <body> 82 <div id="box"> 83 <div class="con"> 84 <!-- img[src=img/$.jpg]*5 --> 85 <img src="img/1.jpg" alt="" /> 86 <img src="img/2.jpg" alt="" /> 87 <img src="img/3.jpg" alt="" /> 88 <img src="img/4.jpg" alt="" /> 89 <img src="img/5.jpg" alt="" /> 90 <!--复制一份第一张图片--> 91 <img src="img/1.jpg" alt="" /> 92 </div><!--end of con--> 93 <ul> 94 <li style="opacity:0.9">包包</li> 95 <li>男装</li> 96 <li>女装</li> 97 <li>男鞋</li> 98 <li>女鞋</li> 99 </ul> 100 </div> 101 </body> 102 </html>
效果图如下：
学习课程网址：http://study.163.com/course/courseLearn.htm?courseId=1003498007#/learn/video?lessonId=1004152564&courseId=1003498007