无缝轮播图

最新推荐文章于 2020-04-21 09:43:43 发布

sujiao666

最新推荐文章于 2020-04-21 09:43:43 发布

阅读量253

点赞数

分类专栏：前端js 文章标签： jQuery无缝轮播图

本文链接：https://blog.csdn.net/u013195452/article/details/52745553

版权

前端js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

//这里用到了iconfont ，首先去图标库下载iconfont用到的左右图标

//css

*{
   padding: 0;
   margin: 0;
}
li{
   list-style: none;
}

.promo{
   width: 520px;
   height: 280px;
   border: 3px solid #000;
   margin: 20px auto;
   position: relative;
   overflow: hidden;
}
.promo ul{
   width: 3200px;
   background: red;
   position: absolute;
   top: 0;
   left: 0;
}
.promo ul li{
   float: left;
}
.promo ol{
   position: absolute;
   bottom: 15px;
   border: 1px solid #000;
   background: rgba(255,255,255,0.3);
   left: 227px;
   border-radius:7px;
}
.promo ol li{
   width: 9px;
   height: 9px;
   background: #B7B7B7;
   margin: 2px;
   float: left;
   border-radius: 50%;
   cursor: pointer;
}
.promo ol li.current{background: #f40;}
.promo i{
   position: absolute;
   top: 120px;
   width: 40px;
   height: 40px;
   background: rgba(0,0,0,0.5);
   font-size: normal;
   color: #fff;
   text-align: center;
   line-height: 40px;
   font-size: 24px;
   cursor: pointer;
   display: none;
}
.promo i.left{
   left: 5px;
}
.promo i.right{
   right: 5px;
}
@font-face {font-family: "iconfont";
   src: url('../iconfont/iconfont.eot?t=1461033890'); /* IE9*/
   src: url('../iconfont/iconfont.eot?t=1461033890#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../iconfont/iconfont.woff?t=1461033890') format('woff'), /* chrome, firefox */
       url('../iconfont/iconfont.ttf?t=1461033890') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
       url('../iconfont/iconfont.svg?t=1461033890#iconfont') format('svg'); /* iOS 4.1- */
   }
.iconfont {
   font-family:"iconfont" !important;
   font-size:16px;
   font-style:normal;
}
//html
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/jquery-3.0.0.js"></script>
       <link rel="stylesheet" href="css/font.css" type="text/css" />
   </head>
   <body>
       <div class="promo">
           <ul>
               <li><img src="img/11.jpg" height="280px" width="520px"></li>
               <li><img src="img/22.jpg" height="280px" width="520px"></li>
               <li><img src="img/33.jpg" height="280px" width="520px"></li>
               <li><img src="img/44.jpg" height="280px" width="520px"></li>
               <li><img src="img/55.jpg" height="280px" width="520px"></li>
               
           </ul>
           <ol>
               <li class="current"></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
           </ol>
           <i class="iconfont left"></i>
           <i class="iconfont right"></i>
       </div>
   </body>
   <script type="text/javascript">
       $(function(){
           var dNum = 0;
           var tNum = 0;
           $('.promo ul').append($('.promo ul li').eq(0).clone(true))
           //右按钮
           function autoplay(){
                  dNum++;
                  if(dNum>4){dNum = 0;}
                  $('.promo ol li').eq(dNum).addClass('current').siblings().removeClass('current');
                tNum++;
                if(tNum>5){
                   tNum=1;
                   $('.promo ul').css('left','0px');
                }
                var move = tNum*(-520);
                  $('.promo ul').animate({'left':''+move+'px'},500)
           }
           $('.right').click(function(event){
                  autoplay();
           });
           //左按钮
           $('.left').click(function(event){
              dNum--;
              if(dNum<0){dNum = 4;}
              $('.promo ol li').eq(dNum).addClass('current').siblings().removeClass('current');
            tNum--;
            if(tNum<0){
               tNum=4;
               $('.promo ul').css('left','-2600px');
            }
            var move = tNum*(-520);
              $('.promo ul').animate({'left':''+move+'px'},500)
           });

           //点击圆点跳转
           $('.promo ol li').click(function(event){
              $(this).addClass('current').siblings().removeClass('current');
             var move = $(this).index()*-520;
             $('.promo ul').animate({'left':''+move+'px'},500)
             tNum = $(this).index();
             dNum = $(this).index();
           });

           //添加定时器
           var timer;
           timer = setInterval(autoplay,2000);

           $('.promo').hover(function(){
              clearInterval(timer);
              $('.promo i').show();
           },function(){
              timer = setInterval(autoplay,2000);
              $('.promo i').hide();
           })

       })
   </script>
</html>