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
时间： 2024-10-13 03:55:08