JQuery-- 实例:小米左右切图,淡入淡出,自动，小圆点触发轮播图

示意图:

demo

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>首页</title>
  6     <style>
  7         *{margin:0px;padding:0px;}
  8         .wrap{700px;height:400px;margin:50px auto 0;position: relative;}
  9         .imgList img{700px;height:400px;position: absolute;left:0px;top:0px;}
 10         .btn {200px;height:20px;position: absolute;bottom: 10px;right:250px;}
 11         .btn ul li{18px;height:18px;border: 1px solid #ddd;list-style: none;border-radius: 9px;float: left;margin:0 6px;
 12         background: #3DB1FA;color: #ddd;text-align: center;cursor: pointer;}
 13         .btn ul li:hover{background: #0e23f0}
 14         .btn ul li.hov{background: #0e23f0}
 15         .btnL{position: absolute;left:20px;top:150px;50px;height:100px;line-height: 100px;font-size: 60px;color: #ddd;text-align: center;cursor: pointer}
 16         .btnR{position: absolute;right:20px;top:150px;50px;height:100px;line-height: 100px;font-size: 60px;color: #ddd;text-align: center;cursor: pointer;}
 17         .btnL:hover,.btnR:hover{background: rgba(0,0,0,.3)}
 18     </style>
 19 </head>
 20 <body>
 21 <div class="wrap">
 22     <div class="imgList">
 23         <img src="img/1.jpg" alt="" style="display: block">
 24         <img src="img/2.jpg" alt="" style="display: none">
 25         <img src="img/3.jpg" alt="" style="display: none">
 26         <img src="img/4.jpg" alt="" style="display: none">
 27         <img src="img/5.jpg" alt="" style="display: none">
 28     </div>
 29     <div class="btn">
 30         <ul>
 31             <li class="hov"></li>
 32             <li></li>
 33             <li></li>
 34             <li></li>
 35             <li></li>
 36         </ul>
 37     </div>
 38     <div class="btnL">&lt;</div>
 39     <div class="btnR">&gt;</div>
 40 </div>
 41 <script src="../lib/jquery-1.12.2.js"></script>
 42 <script>
 43     var timer = null;
 44     var _index = 0;
 45 
 46 
 47     //小圆点hover切换
 48     $('.btn>ul>li').hover(function () {
 49         clearInterval(timer);
 50          _index = $(this).index();
 51         changImg(_index);
 52     },function () {
 53         autoPlay();
 54     });
 55 
 56      //左右切图
 57     $('.btnR').click(function () {
 58         clearInterval(timer);
 59         _index++;
 60         if(_index >4) {
 61            _index = 0;
 62         }
 63         changImg(_index);
 64     });
 65 
 66     $('.btnL').click(function () {
 67         clearInterval(timer);
 68         _index--;
 69         if(_index < 0) {
 70             _index = 4;
 71         }
 72         changImg(_index);
 73 
 74     });
 75     $('.btnR,.btnL').hover(function () {
 76         clearInterval(timer);
 77     },function () {
 78         autoPlay();
 79     });
 80 
 81     function changImg(_index) {
 82         $('.btn>ul>li').eq(_index).addClass('hov').siblings('li').removeClass('hov');
 83         $('.imgList>img').eq(_index).stop().fadeIn().siblings('img').stop().hide();
 84     }
 85     // 自动轮播
 86     function  autoPlay() {
 87         timer = setInterval(function () {
 88             _index++;
 89             if(_index >4) {
 90                 _index = 0;
 91             }
 92             changImg(_index);
 93         },2000);
 94     }
 95 
 96     autoPlay();
 97 
 98 </script>
 99 </body>
100 </html>