jquery 슬라이드

<!--&#십삼;
*{margin:0;padding:0;}&#십삼;
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}&#십삼;
ul,li{list-style:none;}&#십삼;
img{border:0;}&#십삼;
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;}&#십삼;
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}&#십삼;
/* focus */
#focus{width:800px;height:280px;overflow:hidden;position:relative;}&#십삼;
#focus ul{height:280px;position:absolute;}&#십삼;
#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}&#십삼;
#focus ul li div{position:absolute;overflow:hidden;}&#십삼;
#focus .btn{position:absolute;width:780px;height:20px;right:0;bottom:0;text-align:center;}&#십삼;
#focus .btn span{ display: inline-block;width:25px;height:10px;margin-left:5px;cursor:pointer;background:#000;}&#십삼;
-->

 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>

 
//<![CDATA[
$(document).ready(function(){
//그림 개수 얻기 & #13;
var len = $("#focus ul li").length; &#십삼;
//초점도 전체 너비 얻기 & #13;
var zWidth = $("#focus").width();&#십삼;
var index = 0;&#십삼;
var hTime;&#십삼;

var btn = "<div class='btn'>";&#십삼;
for(var i=0; i < len; i++) {
btn += "<span></span>";&#십삼;
}
btn += "</div>";&#십삼;
$("#focus").append(btn);&#십삼;

//버튼 슬라이딩 이벤트 설정 & #13;
$("#focus .btn span").css("opacity",0.4).mouseover(function(){
index = $("#focus .btn span").index(this);&#십삼;
Showpic(index);&#십삼;
}).first().mouseover();&#십삼;

//자동 재생 & #13;
$("#focus").hover(function(){
clearInterval(hTime);&#십삼;
}, function(){
hTime = setInterval(function(){
Showpic(index);&#십삼;
index++;&#십삼;
if(index == len) {index = 0;}&#십삼;
},2000);&#십삼;
}).trigger("mouseleave");&#십삼;

//외곽ul원소의 폭을 계산하고 설정하지 않으면 그림이 미끄러질 틈이 있습니다
$("#focus ul").css("width",zWidth * (len));&#십삼;

//이미지 전환 효과 & #13;
function Showpic(index){
var lpx = -index*zWidth
$("#focus ul").stop().animate({"left":lpx},300);&#십삼;
//현재 버튼 효과 설정 & #13;
$("#focus .btn span").stop().animate({"opacity":"0.4"},300).eq(index).stop().animate({"opacity":"1"},300);&#십삼;
}
});&#십삼;
//]]>