jQuery轮播图淡入淡出，小米官网轮播图

和小米官网轮播图是一样的效果，需要的小伙伴拿走不谢，附上源码下载链接https://github.com/luoyu6/slideshow_xiaomi

注意：写的时候唯一需要的就是布局的时候li元素需要设置成 position: absolute;不然轮播的时候有一段时间出现空白！

以下是效果图（没有动图，只有效果图，凑合看吧尴尬~~）

代码如下

<!DOCTYPE HTML>
<html>

   <head>
       <title>please enter your title</title>
       <meta charset="utf-8">
       <meta name="Author" content="luoyu">
       <style type='text/css'>
           * {
               margin: 0;
               padding: 0;
           }

           li {
               list-style: none;
           }

           #banner {
               width: 730px;
               height: 454px;
               margin: 50px auto;
               position: relative;
           }

           #banner .pic {
               width: 100%;
               height: 100%;
               position: relative;
           }

           #banner .pic ul li {
               position: absolute;
               display: none;
           }

           #banner .tab {
               width: 148px;
               height: 20px;
               position: absolute;
               bottom: 10px;
               left: 50%;
               margin-left: -70px;
           }

           #banner .tab ul li {
               width: 18px;
               height: 18px;
               background: #666;
               border-radius: 100%;
               float: left;
               margin: 1px 3px;
               color: #fff;
               text-align: center;
               line-height: 18px;
               font-family: 'Microsoft yahei';
               font-size: 12px;
               cursor: pointer;
           }

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

           #banner .btn {
               display: none;
           }

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

           #leftBtn {
               left: 0;
           }

           #rightBtn {
               right: 0;
           }
       </style>
   </head>

<body>

               var $tabLi = $('#banner .tab li');
               var $picLi = $('#banner .pic li');
               var $btn = $('#banner .btn');
               var $btnDiv = $('#banner .btn div');
               var $banner = $('#banner');
               var index = 0;
               var timer;

               $tabLi.hover(function() {
                   index = $(this).index();
                   fn();
               });

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

               $btnDiv.click(function() {
                   var i = $(this).index();
                   i ? index++ : index--;

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

auto();

               function auto() {
                   timer = setInterval(function() {
                       index++;

                       fn();
                   }, 500);
               }

</html>

另外多说一句，（小米官网有好几个比较经典的轮播图，我写了个项目，仿小米官网的,里面集成了好几个轮播图，淡入淡出和轮播滚动的特效都有，內们可以去下载来自己看看https://luoyu6.github.io/xiaomi8_9/index.html），在这里粘贴个图吧

jQuery轮播图淡入淡出，小米官网轮播图

猜你喜欢