jquery 幻灯片

浏览数：50 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lin_jquery</title>
<style type="text/css">
.linContainer{margin:10px auto;width:790px;}
.linBox{width:790px;overflow:hidden;height:300px;position:relative;z-index:1;}
.linBoxImg{position:absolute;z-index:10;}
img{border:none;}
.linBoxImg img{float:left;}
.clearBoth{clear:both;}
.linNum{position:absolute; top:230px;right:40px;z-index:100;}
.linNum a{color:#000000;padding:5px;text-decoration:none;}
.linActive{font-weight:bold;}
.linNum a.linActive{color:#ffff00;text-decoration:underline;}
</style>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="linContainer">
   <div class="linBox">
       <div class="linBoxImg">
           <a href="x"><img src="./images/reel_1.jpg" /></a>
           <a href="2"><img src="./images/reel_2.jpg" /></a>
           <a href="3"><img src="./images/reel_3.jpg" /></a>
           <a href="4"><img src="./images/reel_4.jpg" /></a>
           <br class="clearBoth" />
       </div>
       <div class="linNum">
       <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
       </div>
   </div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
   var imgWidth = $(".linBox img").width();
   var imgNum = $(".linBox img").size();
   var imgTotal = imgWidth * imgNum;
   var leftWidth = 0;
   var nnn = 0;
   var leftTotal = -imgWidth * (imgNum - 1);
   $(".linNum a").eq(0).addClass("linActive");
   $(".linBoxImg").css({"width": imgTotal});

   play = function(){
       ok = setInterval(function(){
           $(".linBoxImg").animate({left:leftWidth});
           leftWidth -= imgWidth;
           $(".linNum a").removeClass("linActive");
           $(".linNum a").eq(nnn).addClass("linActive");
               nnn++;
           if(leftWidth < leftTotal){
               leftWidth = 0;
               nnn = 0;
           }
       }, 2000);
   };

   play();
   $(".linNum a").hover(function(){
       $(".linNum a").removeClass("linActive");
       $(this).addClass("linActive");
       var nn = $(this).index();
       leftWidth = -nn * imgWidth;
       $(".linBoxImg").animate({left:leftWidth});
       clearInterval(ok);
   }, function(){
       $(this).removeClass("linActive");
       play();
   });
   $(".linNum a").click(function(){ // 清除点击
       return false;
   });
});
</script>
</body>
</html>