借助jQuery实现广告轮播效果

借助jQuery实现广告轮播效果

 

  1 <!Doctype html>
  2 <html>
  3     <head>
  4         <title>标题</title>
  5         <meta charset="utf-8">
  6         <style>
  7             ul{
  8                 list-style:none;
  9                 display:inline-block;
 10             }
 11 /*广告轮播*/
 12             #slider {
 13                 width: 670px;
 14                 height:240px;
 15                 margin:0 auto;
 16                 margin-top:10px;
 17                 position:relative;
 18                 overflow:hidden;
 19             }
 20             #slider #imgs {
 21                 position:absolute;
 22                 top: 0;  left: 0;
 23                 height:240px;
 24             }
 25             #slider #imgs li{
 26                 float:left;
 27                 z-index:0;
 28             }
 29             #slider #indexs {
 30                 position:absolute;
 31                 bottom:15px;
 32                 right:30px;
 33             }
 34             #slider #indexs li {
 35                 width: 50px;
 36                 height: 11px;
 37                 display: inline-block;
 38                 background: #fff;
 39                 color: #fff;    
 40                 border-radius: 2%;
 41                 text-align: center;
 42                 cursor: pointer;
 43                 margin-left:10px;
 44             }
 45             #slider #indexs li:hover,#slider #indexs li.hover {
 46                 background:#b61b1f;
 47             }
 48         </style>
 49     </head>
 50     <body>
 51         <div id="slider">
 52             <ul id="imgs">
 53             </ul>
 54             <ul id="indexs">
 55             </ul>
 56         </div>
 57     <script src="jquery-1.11.3.js"></script>
 58     <script>
 59         /*广告图片数组*/
 60         var imgs=[
 61             {"i":0,"img":"images/banner_01.jpg"},
 62             {"i":1,"img":"images/banner_02.jpg"},
 63             {"i":2,"img":"images/banner_03.jpg"},
 64             {"i":3,"img":"images/banner_04.jpg"},
 65             {"i":4,"img":"images/banner_05.jpg"},
 66         ];
 67         var adv={
 68             LIWIDTH:0,
 69             $ulImgs:null,
 70             INTERVAL:1000,
 71             timer:0,
 72             WAIT:3000,
 73             init:function(){
 74                 this.LIWIDTH=parseFloat($("#slider").css("width"));
 75                 this.$ulImgs=$("#imgs");
 76                 this.updataView();
 77                 $("#indexs").on("mouseover","li",function(e){
 78                     clearTimeout(this.timer);
 79                     var target=$("#indexs>li").index(e.target);
 80                     var old=imgs[0].i;
 81                     this.move(target-old);
 82                 }.bind(this));
 83                 this.autoMove();
 84             },
 85             autoMove:function(){
 86                 this.timer=setTimeout(this.move.bind(this,1),this.WAIT);
 87             },
 88             move:function(n){
 89                 if (n<0)
 90                 {
 91                     n*=-1;
 92                     imgs=imgs.splice(-n,n).concat(imgs);
 93                     this.updataView();
 94                     this.$ulImgs.stop(true);
 95                     this.$ulImgs.css("left",parseFloat(this.$ulImgs.css("left"))-n*this.LIWIDTH);
 96                     this.$ulImgs.animate({
 97                         left:0},this.INTERVAL);
 98                     this.autoMove();
 99                 }
100                 else
101                 {
102                     this.$ulImgs.stop(true);
103                     this.$ulImgs.animate({
104                         left:-n*this.LIWIDTH
105                         },this.INTERVAL,this.moveCallback.bind(this,n));
106                 }
107             },
108             moveCallback:function(n){
109                 imgs=imgs.concat(imgs.splice(0,n));
110                 this.updataView();
111                 this.$ulImgs.css("left",0);
112                 this.autoMove();
113             },
114             updataView:function(){
115                 for (var i=0,lis="",idxs="";i<imgs.length;i++)
116                 {
117                     lis+=`<li><img src=${imgs[i].img}></li>`;
118                     idxs+="<li></li>";
119                     this.$ulImgs.html(lis).css("width",imgs.length*this.LIWIDTH);
120                     $("#indexs").html(idxs);
121                     $("#indexs").children(`li:eq(${imgs[0].i})`).addClass("hover");
122                 }
123             }
124         }
125         adv.init();
126     </script>
127     </body>
128 </html>

 

注意：此方法必须引入  jquery-1.11.3.js

效果图如下：

 

posted @ 2017-01-09 13:46  时间脱臼  阅读(351)  评论(0)    收藏  举报