淘宝无缝滚动轮播图jQuery，京东无缝滚动轮播图jQuery

前面我有篇笔记是小米淡入淡出轮播图的，现在顺手附上淘宝首页的无缝滚动轮播图，这是源码地址 https://github.com/luoyu6/slideshow_taobao

暂时没有效果图，劳烦大家去下载源码自己看一下了，这个轮播图细节处理的还是比较好的，点击很快的时候，也不会出现空白的情况

代码在这里：

<!DOCTYPE HTML>
<html>

   <head>
       <title>淘宝网轮播图</title>
       <meta charset="utf-8">
       <meta name="Author" content="luoyu">
       <style type='text/css'>
           * {
               margin: 0;
               padding: 0;
           }

           #banner {
               width: 520px;
               height: 280px;
               margin: 20px auto;
               border: 1px solid red;
               position: relative;
           }

           #banner .pic {
               width: 100%;
               height: 100%;
               overflow: hidden;
           }

           li {
               list-style: none;
           }

           #banner .pic ul {
               width: 1000%;
               overflow: hidden;
               margin-left: -520px;
           }

           #banner .pic ul li {
               float: left;
           }

           #banner .tab {
               width: 70px;
               height: 14px;
               background: #fff;
               background: rgba(255, 255, 255, 0.5);
               position: absolute;
               left: 50%;
               margin-left: -35px;
               bottom: 10px;
               border-radius: 7px;
           }

           #banner .tab ul li {
               width: 10px;
               height: 10px;
               border-radius: 100%;
               background: #999;
               float: left;
               margin: 2px 2px;
               cursor: pointer;
           }

           #banner .tab ul li.on {
               background: #f60;
           }

           #banner .btn {
               display: none;
           }

           #banner .btn div {
               width: 40px;
               height: 40px;
               background: #000;
               background: rgba(0, 0, 0, 0.3);
               color: #fff;
               font-size: 26px;
               font-weight: bold;
               text-align: center;
               line-height: 40px;
               cursor: pointer;
               position: absolute;
               top: 50%;
               margin-top: -20px;
           }

           #leftBtn {
               left: 5px;
           }

           #rightBtn {
               right: 5px;
           }

           #banner .btn div.hover {
               background: rgba(0, 0, 0, 0.6)
           }
       </style>
   </head>

<body>

</div>

               var $tabLi = $('#banner .tab li');
               var $picUl = $('#banner .pic ul');
               var $banner = $('#banner');
               var $btn = $('#banner .btn');
               var $btnDiv = $('#banner .btn div');
               var imgWidth = $('#banner .pic li').width();
               var index = 0;
               var timer
               var nowTime = new Date();

               $tabLi.click(function() {
                   index = $(this).index();
                   $(this).addClass('on').siblings().removeClass('on');
                   $picUl.animate({
                       marginLeft: -imgWidth * (index + 1) + 'px'
                   }, 300);
               });

               $banner.hover(function() {
                   $btn.show();
                   clearInterval(timer);
               }, function() {
                   $btn.hide();
                   auto();
               });

               $btnDiv.hover(function() {
                   $(this).addClass('hover');
               }, function() {
                   $(this).removeClass('hover');
               }).click(function() {

                   if(new Date() - nowTime > 350) {
                       nowTime=new Date();
                       var i = $(this).index();
                       i ? index++ : index--;
                       fn();
                   }

               }).mousedown(function() {
                   return false;
               });

                       } else if(index < 0) {
                           $picUl.css({
                               'margin-left': -imgWidth * ($tabLi.length)
                           });
                           index = $tabLi.length - 1;

                       }
                   })
               }

auto();

               function auto() {
                   timer = setInterval(function() {
                       index++;
                       fn();
                   }, 1000);
               }

           });
       </script>
   </body>

</html>

淘宝无缝滚动轮播图jQuery，京东无缝滚动轮播图jQuery

猜你喜欢