1 $(document).ready(function(){
2 //获取图片个数
3 var len = $("#focus ul li").length;
4 //获取焦点图整个宽度
5 var zWidth = $("#focus").width();
6 var index = 0;
7 var hTime;
8
9 var btn = "<div class='btn'>";
10 for(var i=0; i < len; i++) {
11 btn += "<span></span>";
12 }
13 btn += "</div>";
14 $("#focus").append(btn);
15
16 //设置按钮滑动事件
17 $("#focus .btn span").css("opacity",0.4).mouseover(function(){
18 index = $("#focus .btn span").index(this);
19 Showpic(index);
20 }).first().mouseover();
21
22 //自动播放
23 $("#focus").hover(function(){
24 clearInterval(hTime);
25 }, function(){
26 hTime = setInterval(function(){
27 Showpic(index);
28 index++;
29 if(index == len) {index = 0;}
30 },2000);
31 }).trigger("mouseleave");
32
33 //计算出外围ul元素的宽度,不设置的话 图片滑动有空隙
34 $("#focus ul").css("width",zWidth * (len));
35
36 //图片切换效果
37 function Showpic(index){
38 var lpx = -index*zWidth
39 $("#focus ul").stop().animate({"left":lpx},300);
40 //设置当前按钮效果
41 $("#focus .btn span").stop().animate({"opacity":"0.4"},300).eq(index).stop().animate({"opacity":"1"},300);
42 }
43 });
1 <style type="text/css">
2 *{margin:0;padding:0;}
3 body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
4 ul,li{list-style:none;}
5 img{border:0;}
6 .wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
7 h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}
8 /* focus */
9 #focus{width:800px;height:280px;overflow:hidden;position:relative;}
10 #focus ul{height:280px;position:absolute;}
11 #focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
12 #focus ul li div{position:absolute;overflow:hidden;}
13 #focus .btn{position:absolute;width:780px;height:20px;right:0;bottom:0;text-align:center;}
14 #focus .btn span{ display: inline-block;width:25px;height:10px;margin-left:5px;cursor:pointer;background:#000;}
15 </style>
1 <div class="wrapper">
2 <div id="focus">
3 <ul>
4 <li><a href="#" target="_blank"><img src="images/01.jpg" alt="QQ商城焦点图效果下载" /></a></li>
5 <li><a href="#" target="_blank"><img src="images/02.jpg" alt="QQ商城焦点图效果教程" /></a></li>
6 <li><a href="#" target="_blank"><img src="images/03.jpg" alt="jquery商城焦点图效果" /></a></li>
7 <li><a href="#" target="_blank"><img src="images/04.jpg" alt="jquery商城焦点图代码" /></a></li>
8 <li><a href="#" target="_blank"><img src="images/05.jpg" alt="jquery商城焦点图源码" /></a></li>
9 </ul>
10 </div><!--focus end-->
11
12 </div>
