无限轮播的实现，未加自动轮播效果（非原创）

最近一直在看视频，学到了一个无限轮播，今天把它给写下来保存，方便日后自己查阅。

html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="keywords" content="">
  6     <meta name="description" content="">
  7     <meta name="author" content="">
  8     <title>无缝轮播</title>
  9     <link rel="stylesheet" href="css/index.css">
 10 </head>
 11 <body>
 12     <div class="banner">
 13         
 14         <div class="banner_pic"><img src="img/left.jpg" alt="" class="left">
 15             <ul class="banner_ul">
 16                 <li>
 17                     <a href="">
 18                         <img src="img/2.jpg" alt="">
 19                         <p>33333333兰蔻Lancome圣诞彩妆盒彩妆盘双层彩妆锦盒（内含眼影、睫毛膏、粉刷)兰蔻Lancome圣诞彩妆盒彩妆盘双层彩妆锦盒（内含眼影、睫毛膏、粉刷)</p>
 20                     </a>
 21                 </li>
 22                 <li>
 23                     <a href="">
 24                         <img src="img/3.jpg" alt="">
 25                         <p>33333333Dior迪奥润唇膏/口红魅惑唇膏001#淡粉色【润唇膏】Dior迪奥润唇膏/口红 魅惑唇膏001#淡粉色【润唇膏】Dior迪奥润唇膏/口红 魅惑唇膏001#淡粉色【润唇膏】</p>
 26                     </a>
 27                 </li>
 28                 <li>
 29                     <a href="">
 30                         <img src="img/1.jpg" alt="">
 31                         <p>33333333妞娃（NEWA）美容仪家用射频 以色列进口 美容仪器 白金色(含1支凝胶)妞娃（NEWA）美容仪家用射频 以色列进口 美容仪器 白金色(含1支凝胶)</p>
 32                     </a>
 33                 </li>
 34                 <li>
 35                     <a href="">
 36                         <img src="img/1.jpg" alt="">
 37                         <p>1111111111111妞娃（NEWA）美容仪家用射频 以色列进口 美容仪器 白金色(含1支凝胶)妞娃（NEWA）美容仪家用射频 以色列进口 美容仪器 白金色(含1支凝胶)</p>
 38                     </a>
 39                 </li>
 40                 <li>
 41                     <a href="">
 42                         <img src="img/2.jpg" alt="">
 43                         <p>1111111111111兰蔻Lancome圣诞彩妆盒彩妆盘双层彩妆锦盒（内含眼影、睫毛膏、粉刷)兰蔻Lancome圣诞彩妆盒彩妆盘双层彩妆锦盒（内含眼影、睫毛膏、粉刷)</p>
 44                     </a>
 45                 </li>
 46                 <li>
 47                     <a href="">
 48                         <img src="img/3.jpg" alt="">
 49                         <p>1111111111111Dior迪奥润唇膏/口红魅惑唇膏001#淡粉色【润唇膏】Dior迪奥润唇膏/口红 魅惑唇膏001#淡粉色【润唇膏】Dior迪奥润唇膏/口红 魅惑唇膏001#淡粉色【润唇膏】</p>
 50                     </a>
 51                 </li>
 52                 <li>
 53                     <a href="">
 54                         <img src="img/3.jpg" alt="">
 55                         <p>222222222Dior迪奥润唇膏/口红魅惑唇膏001#淡粉色【润唇膏】Dior迪奥润唇膏/口红 魅惑唇膏001#淡粉色【润唇膏】Dior迪奥润唇膏/口红 魅惑唇膏001#淡粉色【润唇膏】</p>
 56                     </a>
 57                 </li>
 58                 <li>
 59                     <a href="">
 60                         <img src="img/1.jpg" alt="">
 61                         <p>2222222222妞娃（NEWA）美容仪家用射频 以色列进口 美容仪器 白金色(含1支凝胶)妞娃（NEWA）美容仪家用射频 以色列进口 美容仪器 白金色(含1支凝胶)</p>
 62                     </a>
 63                 </li>
 64                 <li>
 65                     <a href="">
 66                         <img src="img/2.jpg" alt="">
 67                         <p>22222222兰蔻Lancome圣诞彩妆盒彩妆盘双层彩妆锦盒（内含眼影、睫毛膏、粉刷)兰蔻Lancome圣诞彩妆盒彩妆盘双层彩妆锦盒（内含眼影、睫毛膏、粉刷)</p>
 68                     </a>
 69                 </li>
 70                 <li>
 71                     <a href="">
 72                         <img src="img/2.jpg" alt="">
 73                         <p>33333333兰蔻Lancome圣诞彩妆盒彩妆盘双层彩妆锦盒（内含眼影、睫毛膏、粉刷)兰蔻Lancome圣诞彩妆盒彩妆盘双层彩妆锦盒（内含眼影、睫毛膏、粉刷)</p>
 74                     </a>
 75                 </li>
 76                 <li>
 77                     <a href="">
 78                         <img src="img/3.jpg" alt="">
 79                         <p>33333333Dior迪奥润唇膏/口红魅惑唇膏001#淡粉色【润唇膏】Dior迪奥润唇膏/口红 魅惑唇膏001#淡粉色【润唇膏】Dior迪奥润唇膏/口红 魅惑唇膏001#淡粉色【润唇膏】</p>
 80                     </a>
 81                 </li>
 82                 <li>
 83                     <a href="">
 84                         <img src="img/1.jpg" alt="">
 85                         <p>33333333妞娃（NEWA）美容仪家用射频 以色列进口 美容仪器 白金色(含1支凝胶)妞娃（NEWA）美容仪家用射频 以色列进口 美容仪器 白金色(含1支凝胶)</p>
 86                     </a>
 87                 </li>
 88                 <li>
 89                     <a href="">
 90                         <img src="img/1.jpg" alt="">
 91                         <p>1111111111111妞娃（NEWA）美容仪家用射频 以色列进口 美容仪器 白金色(含1支凝胶)妞娃（NEWA）美容仪家用射频 以色列进口 美容仪器 白金色(含1支凝胶)</p>
 92                     </a>
 93                 </li>
 94                 <li>
 95                     <a href="">
 96                         <img src="img/2.jpg" alt="">
 97                         <p>1111111111111兰蔻Lancome圣诞彩妆盒彩妆盘双层彩妆锦盒（内含眼影、睫毛膏、粉刷)兰蔻Lancome圣诞彩妆盒彩妆盘双层彩妆锦盒（内含眼影、睫毛膏、粉刷)</p>
 98                     </a>
 99                 </li>
100                 <li>
101                     <a href="">
102                         <img src="img/3.jpg" alt="">
103                         <p>1111111111111Dior迪奥润唇膏/口红魅惑唇膏001#淡粉色【润唇膏】Dior迪奥润唇膏/口红 魅惑唇膏001#淡粉色【润唇膏】Dior迪奥润唇膏/口红 魅惑唇膏001#淡粉色【润唇膏】</p>
104                     </a>
105                 </li>
106             </ul>
107         </div>
108         <img src="img/right.jpg" alt="" class="right">
109     </div>
110     <script src="js/jquery-min.js"></script>
111     <script src="js/index.js"></script>
112 </body>
113 </html>

css

 

*{
    margin:0;
    padding:0;
}
ul,li{
    list-style: none;
}
a,a:hover{
    text-decoration: none;
}
.banner{
    width:966px;
    height: 440px;
    margin:50px auto 0;
    position: relative;
}
.left,.right{
    width: 49px;
    height: 109px;
    cursor: pointer;
    position: absolute;
    top:36%;
    z-index: 9;
}
.left{
    left:0;
}
.right{
    right: 0;
}
.banner_pic{
    width:966px;
    height: 440px;
    margin:0 auto;
    position: relative;
    overflow: hidden;
}
.banner_ul{
    width:500%;/*相对于其父元素的5倍。*/
    height: 440px;
    position: absolute;
    top:0;
    left:-966px;
}
.banner_ul li{
    float: left;
    width:280px;
    height: 430px;
    border:5px solid #f893b4;
    border-left:1px solid #f893b4;
    border-right:1px solid #f893b4;
    margin:0 20px;
}
.banner_ul li a{
    display: block;
    padding:20px 0;
    width:270px;
    margin:0 auto;
}
.banner_ul li a p{
    width:240px;
    margin:50px auto 0;
    color: #999;
    font-size: 14px;
    line-height: 25px;
}
.banner_ul li a:hover p{
    color: #DA3333;
}

 

js(需要先引用JQuery)

$(function(){
    var n = 1;
　　var flag = false;//控制标识，可以防止动画未结束而进行下一步操作（动画时间小于连续操作时间如多次快速单击）
    $('.left').click(function(){
　　　　if(flag){
　　　　　　return;
　　　　}
　　　　flag = true;

        n++;
        $('.banner_ul').animate({left: -966*n+ 'px'},200,function(){
            //回调函数，每次动画后面执行的函数
            if(n == 4){
                n=1;
                var sum = -966*n;
                $(this).css('left',sum+'px');
            }
        });
    })
    
    $('.right').click(function(){

      if(flag){
　　　　　　return;
　　　　}
　　　　flag = true;


        n--;
        $('.banner_ul').animate({left:-966*n + 'px'},200,function(){
            if(n==0){
                n=3;
                var sum = -966*n;
                $(this).css('left',sum+'px');
            }
        });
    })
    //setInterval(function(){},2000);//定时器
})

下面这张图片为了更好的理解js中n对应知道变化情况，其中n=0是第三个轮播的重复展示，n=4是第一个轮播的重复展示。

 

posted @ 2017-03-06 18:32  Tsingtree  阅读(313)  评论(0)  编辑  收藏  举报