淡入淡出的輪播圖元件

鰻魚烤麵包發表於2018-06-13
元件
   * {
       padding: 0;
       margin:0;
   }
   ul {
       list-style: none;
   }
   .out {
       width: 640px;
       height: 270px;
       margin:50px auto;
       position: relative;
   }
   .out .img li {
       position: absolute;
       left:0;
       top:0;
       display: none;
   }
   .out .num {
       position: absolute;
       bottom: 20px;
       left: 0;
       font-size:0px;
       text-align:center;
       width: 100%;
   }
   .out .num li {
       width: 20px;
       height: 20px;
       line-height:20px;
       border-radius:50%;
       background:#666;
       color: #fff;
       text-align:center;
       display: inline-block;
       font-size:16px;
       margin:0 3px;
       cursor: pointer;
   }
   .out .num li.active {
       background:#a00;
   }
   .out .btn {
       position:absolute;
       top: 50%;
       margin-top:-30px;
       width: 30px;
       height: 60px;
       line-height:60px;
       background:rgba(0, 0, 0, 0.5);
       font-size:40px;
       color: #fff;
       text-align:center;
       display: none;
   }
   .out .left {
       left: 0;
   }
   .out .right {
       right: 0;
   }
   .out:hover .btn {
       display: block;
       cursor: pointer;
   }
   </style>
<body>
   <div class="out ">
       <ul class="img ">
           <li>
               <a href="# ">
                   <img src="image/1.jpg " alt=" ">
               </a>
           </li>
           <li>
               <a href="# ">
                   <img src="image/2.jpg " alt=" ">
               </a>
           </li>
           <li>
               <a href="# ">
                   <img src="image/3.jpg " alt=" ">
               </a>
           </li>
           <li>
               <a href="# ">
                   <img src="image/4.jpg " alt=" ">
               </a>
           </li>
           <li>
               <a href="# ">
                   <img src="image/5.jpg " alt=" ">
               </a>
           </li>
       </ul>
       <ul class="num ">
       </ul>
       <div class="left btn ">
           <</div>
               <div class="right btn ">></div>
       </div>
</body>

     <script type="text/javascript" src="JS/jquery.js"></script>
   <script type="text/javascript">
 $(function() {

    //程式碼初始化
       var size=$(".img li").size();
       for (var i = 1; i <= size; i++) {
           var li="<li>"+i+"</li>";
           $(".num").append(li);
       };

       //手動控制輪播效果
       $(".img li").eq(0).show();
       $(".num li").eq(0).addClass("active");
       $(".num li").mouseover(function() {
           $(this).addClass("active").siblings().removeClass("active");
           var index = $(this).index();
           i=index;
           $(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
       })

       //自動
       var i = 0;
       var t = setInterval(move, 1500);
       //核心向左的函式
       function moveLeft() {
           i--;
           if (i == -1) {
                 i = size-1;
           }
           $(".num li").eq(i).addClass("active").siblings().removeClass("active");
           $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

       }
       //核心向右的函式
       function move() {
           i++;
           if (i == size) {
               i = 0;
           }
           $(".num li").eq(i).addClass("active").siblings().removeClass("active");
           $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

       }
       //定時器的開始與結束
       $(".out").hover(function() {
           clearInterval(t);
       }, function() {
           t = setInterval(move, 1500)
       })
       //左邊按鈕的點選事件
       $(".out .left").click(function() {
           moveLeft();
       })
       //右邊按鈕的點選事件
       $(".out .right").click(function() {
           move();
       })
   })
</script>
複製程式碼

相關文章