简易轮播写法

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7     ul{padding: 0;margin: 0;border: 0;}
  8 
  9     .slider{width: 400px;height: 400px;position: relative;margin: 0 auto;
 10     }
 11     .slider ul{width: 400px;height: 400px;margin-left: 50px;}
 12     .slider li{width: 400px;height: 400px;position: absolute;top: 0; left: 0;list-style: none;}
 13     .slider li img{width: 400px;height: 400px;position: relative;
 14     }
 15     .left{width:50px; height:50px; position: absolute;top:175px;left: -50px;background: black;display: none;}
 16     .right{width:50px; height:50px; position: absolute;top:175px;right: -50px;background: black;display: none;}
 17     .num{width: 160px; margin: 0 auto;}
 18     .num li{float: left; width: 20px;height: 20px;border-radius: 10px; background: gray;list-style: none;margin: 10px;}
 19     .active{background:red !important;}
 20 
 21     </style>
 22     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
 23 
 24     
 25 </head>
 26 <body>
 27     <div class="flexslider">
 28         <div class="slider">
 29             <ul >
 30                 <li><img src="图片" /></li>
 31                 <li><img src="图片" /></li>
 32                 <li><img src="图片" /></li>
 33                 <li><img src="图片" /></li>
 34             </ul>
 35             <div class="left"></div>
 36             <div class="right"></div>
 37         </div>
 38         
 39         <ul class="num">
 40             <li class="active"></li>
 41             <li></li>
 42             <li></li>
 43             <li></li>
 44         </ul>
 45     </div>
 46 
 47 
 48 <script>
 49 $(function() {
 50     var count=$('.slider li').length;
 51     var index=0;
 52     var timer;
 53     
 54 //全部轮播定时器
 55     function setTimer(){
 56             timer=setInterval(function(){
 57             index++;
 58             $(".slider li").eq(index%count).show().siblings('li').hide();
 59             $(".num li").eq(index%count).addClass('active').siblings('li').removeClass('active');
 60 
 61         },1000)
 62     };
 63 //定时器运行
 64     setTimer();
 65 
 66 //移入移除轮播开关定时器
 67     $(".slider").mouseover(function(event) {
 68         clearInterval(timer);
 69 
 70         }).mouseout(function(event) {
 71 
 72             setTimer();
 73         });
 74 //移入顶部圆点显示对应图片
 75     $(".num li").mouseover(function(event) {
 76         clearInterval(timer);
 77         index = $(this).index('.num li');
 78         $(this).addClass('active').siblings('li').removeClass('active');
 79         $(".slider li").eq(index).show().siblings('li').hide();
 80             }).mouseout(function(event) {
 81                 setTimer();
 82                     });
 83 
 84 //左右按钮进入进出隐藏显示
 85     $(".slider").mouseover(function(event) {
 86         clearInterval(timer);
 87         $(".left").show();
 88         $(".right").show();
 89     }).mouseout(function(event) {
 90         $(".left").hide();
 91         $(".right").hide();
 92 
 93     });
 94 
 95 
 96 
 97     //左右按钮轮播
 98     $(".left").click(function(event) {
 99         index--;
100         $(".slider li").eq(index%count).show().siblings('li').hide();
101         $(".num li").eq(index%count).addClass('active').siblings('li').removeClass('active');
102     });
103 
104     $(".right").click(function(event) {
105         index++;
106         $(".slider li").eq(index%count).show().siblings('li').hide();
107         $(".num li").eq(index%count).addClass('active').siblings('li').removeClass('active');
108     });
109 })简易轮播写法
110 
111 </script>
112 
113 
114 </script>
115     
116 </body>
117 </html>