jquery幻灯片

 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>