jquery 图片轮播-优快云博客

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>图片轮播</title>
   <style type="text/css">
       *{padding:0;margin:0;}
       ul,ol{list-style: none;}
       .box{width:500px;height:400px;border:1px solid #000;margin:10px auto;position:relative;}
       .pics li{width:500px;height:400px;background:red;display:none;}
       /*当前图片*/
       .pics .block{display:block;}
       .pics li:nth-child(2){background:orange;}
       .pics li:nth-child(3){background:blue;}
       .pics li:nth-child(4){background:pink;}
       .list{position:absolute;right:100px;bottom:30px;}
       .list li{width:20px;height:20px;border:1px solid #000;float:left;margin-left:10px;border-radius:50%;}
       /*当前小点*/
       .list .on{background:yellow;}
   </style>
</head>
<body>
   <div class="box" id="box">
       <ul class="pics" id="pics">
           <li class="block">1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
       </ul>
       <ol class="list" id="list">
           <li class="on"></li>
           <li></li>
           <li></li>
           <li></li>
       </ol>
   </div>
</body>
   <script type="text/javascript" src="js/jquery1.7.js"></script>
   <script type="text/javascript">
       //鼠标滑过小点显示相应图片
       $("#list li").mouseover(function(){
           //当前下标
           var index=$(this).index();
           $(this).addClass("on").siblings().removeClass("on");
           //$("#pics li").eq(index).addClass("block").siblings().removeClass("block");
           $("#pics li").eq(index).show().siblings().hide();
           //$("#pics li").eq(index).css("display","block").siblings().css("display","none");
       })
       //鼠标点击左边，显示上一张图片

//鼠标点击右边，显示下一张图片

       //图片自动轮播
       var timer=null;
       var idx=0;
       var len=$("#list li").length;
       timer=setInterval(function(){
           idx++;
           if(idx>len-1){
               idx=0;
           }
           $("#list li").eq(idx).addClass("on").siblings().removeClass("on");
           // $("#pics li").eq(idx).addClass("block").siblings().removeClass("block");
           $("#pics li").eq(idx).show().siblings().hide();
       },1000)

       //鼠标滑过大盒子，停止轮播
       //鼠标离开大盒子，开始轮播
       $("#box").mouseover(function(){
           clearInterval(timer);
       }).mouseout(function(){
           timer=setInterval(function(){
               idx++;
               if(idx>len-1){
                   idx=0;
               }
               $("#list li").eq(idx).addClass("on").siblings().removeClass("on");
               //$("#pics li").eq(idx).addClass("block").siblings().removeClass("block");
               $("#pics li").eq(idx).show().siblings().hide();
           },1000)
       })
   </script>
</html>