jQuery淡入淡出輪播圖實現

　　大家好我是 只是個單純的小白，這是人生第一次寫博客，准備寫的內容是Jquery淡入淡出輪播圖實現，在此之前學習JS寫的輪播圖效果都感覺不怎么好，學習了jQuery里的淡入淡出效果后又寫了一次輪播圖效果明顯感覺好了許多。現在我就來分享下自己寫輪播圖的思路和方法。

 

HTML部分：

 <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>

 CSS部分:

  <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兩部分。展示的效果是這樣的:

 下面的就是JS部分:

<script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js" type="text/javascript"></script>

    <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>

 

 　　我就來說說我寫這個輪播圖的想法和思路:

　　這個 time()函數 是整個輪播圖的關鍵，輪播圖通過jQuery的 fadeTo() 實現顯示和隱藏， 定義的 n 是顯示哪一張圖片的下標, time() 里的 for循環是在顯示下一張圖片之前 遍歷所有圖片都隱藏 防止有圖片和顯示的圖片透明度都為1的情況。

　　點擊按鈕切換效果中: for循壞的目的是為了獲取6張圖片里顯示的那一張圖片的下標，然后根據 左 右切換的情況 傳值 給 n 並且 執行函數 time()。

　　鼠標移入移出函數: 啟動計時器： timer = setInterval(time,4000);  停止計時器 ：clearInterval(timer); 。

　　點擊li序號切換圖片: 通過for()循壞遍歷整個li， 這還有個閉包問題 必須使用 立即執行函數，思路和 點擊按鈕切換效果相同。

 

　　這是整個代碼的效果圖:

 

 

　　這就是寫整個輪播圖的要用到的,希望大家可以采納，博客的圖片來自天堂圖片網挺好看的 。蟹蟹大家哦！！

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2019-10-16 20:57:14