jQuery淡入淡出輪播圖實現

時間 2020-05-07

原文原文鏈接

　　你們好我是只是個單純的小白，這是人生第一次寫博客，準備寫的內容是Jquery淡入淡出輪播圖實現，在此以前學習JS寫的輪播圖效果都感受不怎麼好，學習了jQuery裏的淡入淡出效果後又寫了一次輪播圖效果明顯感受好了許多。如今我就來分享下本身寫輪播圖的思路和方法。javascript

HTML部分：css

 <div id="img-box" style="width:700px; height:350px;"> <img style="opacity: 1;" width="700px" height="350px" id="imgis" alt="《雪人奇緣》動畫電影桌面壁紙" src="https://img.ivsky.com/img/bizhi/pre/201909/25/abominable-003.jpg"> <img width="700px" height="350px" id="imgis" alt="蔥翠的竹林圖片" src="https://img.ivsky.com/img/tupian/pre/201902/13/zhulin.jpg"> <img width="700px" height="350px" id="imgis" alt="洶涌的海浪圖片" src="https://img.ivsky.com/img/tupian/pre/201903/14/hailang-001.jpg"> <img width="700px" height="350px" id="imgis" alt="計時的沙漏圖片" src="https://img.ivsky.com/img/tupian/pre/201903/14/shalou-002.jpg"> <img width="700px" height="350px" id="imgis" alt="油菜花圖片" src="https://img.ivsky.com/img/tupian/pre/201902/13/youcaihua-002.jpg"> <img width="700px" height="350px" id="imgis" alt="紫樂多肉圖片" src="https://img.ivsky.com/img/bizhi/pre/201906/27/yingguo_duanmaomao-008.jpg"> <div id="img-left"> < </div> <div id="img-right"> > </div> <div id="img-num"> <li class="num-one">0</li> <li class="num-two">1</li> <li class="num-three">2</li> <li class="num-four">3</li> <li class="num-five">4</li> <li class="num-six">5</li> </div> </div>

HTML：

CSS部分:java

 <style> * { margin: 0; padding: 0;
        } #img-box { position: relative; border: 25px solid #ccc; margin: 100px auto;
        } #img-box img { position: absolute; display: block; opacity: 0; float: left; cursor:pointer;
        } #img-box #img-left, #img-box #img-right{ position: absolute; width: 65px; height: 120px; border: 4px solid thistle; border-radius: 6px; background-color: black; opacity: 0.6; cursor: pointer; color: #fff; font-size: 30px; text-align: center; line-height: 120px;
        } #img-box #img-left { left: 1px; top: 31%;
        } #img-box #img-right { right: 1px; top: 31%;
        } #img-box #img-num{ position:absolute; width:500px; height:50px;
            /* border:2px solid red; */ bottom:0px; left:15%; display:flex; flex-direction:row; justify-content:space-around;
        } #img-box #img-num li{ display:inline-block; list-style:none; font-size:14px; color:#fff; text-align: center; line-height: 40px; cursor: pointer; width:45px; height:40px; border-radius: 50%; background-color:black;
        } </style>

　　這是HTML 和 CSS兩部分。展現的效果是這樣的:jquery

下面的就是JS部分:閉包

<script> $(document).ready(function () { var imgLeath = $("img").length; var liLeath = $("li").length; // 顯示圖片的下標 (全局變量)
            var n = 0; //設置定時器timer
            var timer = setInterval(time, 4000); // 輪播函數
            // index 爲 隱藏圖片 ondex爲顯示的圖片
            function time() {
                n++; if (n == imgLeath) { n = 0; } for(var i=0; i<imgLeath; i++) { $("#img-box img").eq(i).fadeTo(0,0); } $("#img-box img").eq((n)).delay(50).fadeTo(500, 1); } //設置點擊切換效果 (右)
            var rightteum; $("#img-right").click(function () { for (var i = 0; i < imgLeath; i++) { if ($("#img-box img").eq(i).css("opacity") != '0') { // 獲取當前圖片顯示的下標
                        righteum = i; } } if(righteum == 5) { righteum = 5; } n = (righteum); time(); }); // 設置點擊切換效果 (左)
            var lefteum; $("#img-left").click(function () { for(var i=0; i<imgLeath; i++){ if($("#img-box img").eq(i).css("opacity") != '0'){ // 獲取當前圖片的下標
                        lefteum = i; } } if(lefteum == 0){ lefteum = 6; } n = (lefteum-2); time(); }); // 當鼠標移入框內 輪播圖中止
            $("#img-box").mouseover(function(){ clearInterval(timer); }); //當鼠標移出框內 輪播圖進行
            $("#img-box").mouseout(function(){ timer = setInterval(time,4000); }); //點擊li序號 圖片就切換到那一張
            for(var i=0; i<liLeath; i++) { //閉包問題
                (function(i){ $("#img-num li").eq(i).click(function(){ // i爲切換圖片的下標
 console.log(i); //把 (i-1) 傳給 n 由於在 time() 函數中 要進行 n++
                        n = (i-1); time(); }); })(i) } }) </script>