jQuery輪播圖鼠標移入中止，移出播放，點擊小橫條切換圖片

時間 2019-12-02

標籤 jquery 鼠標移入中止移出播放點擊橫條切換圖片欄目 JQuery 简体版

原文原文鏈接

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>banner</title>
  7 </head>
  8 <style>
  9 .banner {
 10     min-width: 1200px;
 11     min-height: 350px;
 12     position: relative;
 13 }
 14 
 15 .banner-img {
 16     position: relative;
 17 }
 18 
 19 .banner img {
 20     width: 100%;
 21     height: auto;
 22     position: absolute;
 23 }
 24 
 25 .banner-ul {
 26     list-style: none;
 27     display: flex;
 28     z-index: 5;
 29     position: absolute;
 30     bottom: 21px;
 31     left: 50%;
 32     transform: translateX(-50%);
 33 }
 34 
 35 .banner-ul li {
 36     width: 80px;
 37     height: 11px;
 38     background-color: #fff;
 39     margin-right: 15px;
 40 }
 41 .banner .banner-active{
 42     background-color: red;
 43 }
 44 
 45 .banner1,.banner2{
 46     display:none;
 47 }
 48 </style>
 49 <body>
 50     <div class="banner">
 51         <div class="banner-img">
 52             <img src="img/banner0.png" alt="輪播圖">
 53             <img class="banner1" src="img/banner1.png" alt="輪播圖">
 54             <img class="banner2" src="img/banner2.png" alt="輪播圖">
 55         </div>
 56         <ul class="banner-ul">
 57             <li class="banner-active"></li>
 58             <li></li>
 59             <li></li>
 60         </ul>
 61     </div>
 62 </body>
 63 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 64 <script>
 65     $(function(){
 66          // 輪播圖
 67     var i = 0;
 68     function autoPlay() { //自動播放暫停
 69         
 70         function play() {//play函數-begin
 71             i++;
 72             if (i > 2) {
 73                 i = 0;
 74             }
 75             $('.banner-img img').eq(i).fadeIn(1000).siblings().fadeOut(1000);
 76             //改變下面三條橫槓狀態
 77             $(".banner-ul li").eq(i).css(
 78                 "background", "red"
 79             ).siblings().css(
 80                 "background", "#fff"
 81             )
 82         } //play函數-end
 83         setplay = setInterval(play, 3000);
 84     }
 85     autoPlay();
 86 
 87     //鼠標移進移出輪播暫停和啓動
 88     $(".banner").hover(function() {
 89         clearInterval(setplay);
 90     }, autoPlay);
 91 
 92 
 93     //點擊小長條方框 圖片切換
 94     $(".banner-ul li").click(function() {
 95         $(this).css(
 96             "background", "red"
 97         ).siblings().css(
 98             "background", "#fff"
 99         )
100         var index = $(this).index();
101         $(".banner-img img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
102     });
103     })
104 
105     // 監聽瀏覽器窗口大小發生變化時，改變banner的高度
106     //用來處理banner下的ul定位用
107     window.onresize = function() {
108         var bannerImgHeight = $('.banner-img img').css('height');
109         var y = $('.banner').css("height", bannerImgHeight);
110     }
111     //f5刷新頁面後定位
112     var bannerImgHeight = $('.banner-img img').css('height');
113     var y = $('.banner').css("height", bannerImgHeight);
114 </script>
115 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。