jQuer 如何實現輪播圖

如何用 jQuery 實現輪播圖

直接點擊 對應的鏈接看對應具體代碼
註釋很詳細了，就不做贅述了

一定一定不要忘記加入 jQuery

頂部

html代碼
css代碼
js代碼

方便你們複製，直接來一個全部的

全部在一起的代碼

html代碼

回到頂部查看其他代碼

<div class="div">
        <ul class="ul">
            <li><a href=""><img src="./jQuery_輪播/img/01.jpg" alt=""></a></li>
            <li><a href=""><img src="./jQuery_輪播/img/02.jpg" alt=""></a></li>
            <li><a href=""><img src="./jQuery_輪播/img/03.jpg" alt=""></a></li>
        </ul>
        
        <!-- 設置點擊原點，切換相應的圖片 -->
        <ul class="ul_2">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>


        <!-- 設置下一張上一張 -->
        <button class="back"><</button>
        <button class="next">></button>

    </div>

回到頂部查看其他代碼

css代碼

回到頂部查看其他代碼

*{
   
   
            margin: 0;
            padding: 0;
        }
        li{
   
   
            list-style: none;
        }

        /* 圖片樣式 */
        /* 注：將所有圖片先隱藏，第一個圖片顯示 */
        img{
   
   
            width: 350px;
        }
        .ul >li{
   
   
            position: absolute;
            display: none;
        }
        .ul :first-child{
   
   
            display: block;
        }

        /* 小圓點樣式 */
        .ul_2{
   
   
            position: absolute;
            margin-left: 114px;
            bottom: 30px;
        }
        .ul_2 >li{
   
   
            width: 20px;
            height: 20px;
            background: rgba(0, 0, 0, 0.6);
            float: left;
            margin-right: 30px;
        }
        .ul_2 >.active{
   
   
            background: rgba(255, 0, 0, 0.6);
        }
        .div{
   
   
            position: relative;
            height: 622px;
            width: 350px;
        }


        /* 下一張，上一張效果 */
        .back{
   
   
            position: absolute;
            width: 25px;
            height: 25px;
            left: 0;
            top: 45%;
            background: rgba(255, 255, 255, 0.6);
            color: rgba(255, 0, 0, 0.6);
        }
        .next{
   
   
            position: absolute;
            width: 25px;
            height: 25px;
            right: 0;
            top: 45%;
            background: rgba(255, 255, 255, 0.6);
            color: rgba(255, 0, 0, 0.6);
        }

回到頂部查看其他代碼

JavaScript代碼

回到頂部查看其他代碼

//設置一個下標 
        var index=0;
        

        //封裝輪播的函數
        function move(){
   
   
            //讓下標每次增加
            index+=1;

            //判斷，因爲圖片只有三張，所以下標大於2時，讓其再等於0
            //拓展，當圖片數不確定時，就是 下標大於等於長度 時，讓 index 等於0
            if( $( ".ul >li" ).length <= index ){
   
   
                index=0
            }

            //利用動畫效果，讓一個圖片顯示，其他隱藏
            $( ".ul li" ).eq( index ).show( 1000 ).siblings().hide( 1000 )
            $( ".ul_2 >li" ).eq( index ).addClass( "active" ).siblings().removeClass( "active" )
            // console.log( index )

            
        }


        //利用計時器達到輪播效果
        var x=setInterval( move,3000 )


        //鼠標移入 ul 時，停止輪播，也就是清除計時器
        //鼠標移出 ul 時，繼續輪播，重新加入計時器
        //使用 jQuery 中的 hover
        $( ".ul" ).hover( function(){
   
   
            clearInterval( x )
        },function(){
   
   
            //這裏必須寫 x=上面的計時器 
            //單獨寫的話計時器都會執行，輪播會加速
            x=setInterval( move,3000 )
        } )
        

        //設置點擊方塊/圓點，切換相應的圖片
        //設置點擊事件 或者 進入事件，隨機而動
        $( ".ul_2 li" ).on( "click",function(){
   
   
            //設置下標等於點擊時候的下標
            index=$( this ).index();
            console.log( index )

            //根據點擊時候的下標，顯示對應的圖片，其他圖片隱藏
            $( ".ul >li" ).eq( index ).show( 500 ).siblings().hide( 500 );
            //點擊的小方塊，添加樣式，其他刪除
            $( this ).addClass( "active" ).siblings().removeClass( "active" )
        } )


        //因爲點擊方塊不屬於裝圖片的 ul，所以需要再加一下
        $( ".ul_2 li" ).hover( function(){
   
   
            clearInterval( x )
        },function(){
   
   
            //這裏必須寫 x=上面的計時器 
            //單獨寫的話計時器都會執行，輪播會加速
            x=setInterval( move,3000 )
        } )
        //返回上面，給 move 方法中對應的 點擊方塊 設置樣式
        

        //設置上一張下一張的效果
        // 下一張，直接調用
        $( ".next" ).on( "click",function(){
   
   
            move();
        } )

        //上一張
        $( ".back" ).on( "click",function(){
   
   
            //點一次，下標減一
            index--;

            //第一種、當 下標 小於0時，讓下標等於0，也就是第一張圖
            // if( index < 0 ){
   
   
            //     index=0
            // }

            //第二種、當 下標 小於0時，讓下標再等於最後一個圖對應的下標，也就是跳轉到最後一個圖
            if( index < 0 ){
   
   
                //下標等於 圖片個數減一，即 length-1
                index=$( ".ul li" ).length-1
            }
            console.log( index );

            
            //同上
            $( ".ul li" ).eq( index ).show( 500 ).siblings().hide( 500 )
            $( ".ul_2 >li" ).eq( index ).addClass( "active" ).siblings().removeClass( "active" )
        } )


        //因爲上一個，下一個不屬於裝圖片的 ul，所以需要再加一下停止循環
        $( "button" ).hover( function(){
   
   
            clearInterval( x )
        },function(){
   
   
            //這裏必須寫 x=上面的計時器 
            //單獨寫的話計時器都會執行，輪播會加速
            //重要的事情說三遍
            x=setInterval( move,3000 )
        } )

---

回到頂部查看其他代碼

全部代碼

回到頂部查看其他代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.5.1.js"></script>
    <style>
        *{
    
     
            margin: 0;
            padding: 0;
        }
        li{
    
     
            list-style: none;
        }

        /* 圖片樣式 */
        /* 注：將所有圖片先隱藏，第一個圖片顯示 */
        img{
    
     
            width: 350px;
        }
        .ul >li{
    
     
            position: absolute;
            display: none;
        }
        .ul :first-child{
    
     
            display: block;
        }

        /* 小圓點樣式 */
        .ul_2{
    
     
            position: absolute;
            margin-left: 114px;
            bottom: 30px;
        }
        .ul_2 >li{
    
     
            width: 20px;
            height: 20px;
            background: rgba(0, 0, 0, 0.6);
            float: left;
            margin-right: 30px;
        }
        .ul_2 >.active{
    
     
            background: rgba(255, 0, 0, 0.6);
        }
        .div{
    
     
            position: relative;
            height: 622px;
            width: 350px;
        }


        /* 下一張，上一張效果 */
        .back{
    
     
            position: absolute;
            width: 25px;
            height: 25px;
            left: 0;
            top: 45%;
            background: rgba(255, 255, 255, 0.6);
            color: rgba(255, 0, 0, 0.6);
        }
        .next{
    
     
            position: absolute;
            width: 25px;
            height: 25px;
            right: 0;
            top: 45%;
            background: rgba(255, 255, 255, 0.6);
            color: rgba(255, 0, 0, 0.6);
        }
    </style>
</head>
<body>
    <div class="div">
        <ul class="ul">
            <li><a href=""><img src="./jQuery_輪播/img/01.jpg" alt=""></a></li>
            <li><a href=""><img src="./jQuery_輪播/img/02.jpg" alt=""></a></li>
            <li><a href=""><img src="./jQuery_輪播/img/03.jpg" alt=""></a></li>
        </ul>
        
        <!-- 設置點擊原點，切換相應的圖片 -->
        <ul class="ul_2">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>


        <!-- 設置下一張上一張 -->
        <button class="back"><</button>
        <button class="next">></button>

    </div>
    

    <script>
        //設置一個下標 
        var index=0;
        

        //封裝輪播的函數
        function move(){
    
     
            //讓下標每次增加
            index+=1;

            //判斷，因爲圖片只有三張，所以下標大於2時，讓其再等於0
            //拓展，當圖片數不確定時，就是 下標大於等於長度 時，讓 index 等於0
            if( $( ".ul >li" ).length <= index ){
    
     
                index=0
            }

            //利用動畫效果，讓一個圖片顯示，其他隱藏
            $( ".ul li" ).eq( index ).show( 1000 ).siblings().hide( 1000 )
            $( ".ul_2 >li" ).eq( index ).addClass( "active" ).siblings().removeClass( "active" )
            // console.log( index )

            
        }


        //利用計時器達到輪播效果
        var x=setInterval( move,3000 )


        //鼠標移入 ul 時，停止輪播，也就是清除計時器
        //鼠標移出 ul 時，繼續輪播，重新加入計時器
        //使用 jQuery 中的 hover
        $( ".ul" ).hover( function(){
    
     
            clearInterval( x )
        },function(){
    
     
            //這裏必須寫 x=上面的計時器 
            //單獨寫的話計時器都會執行，輪播會加速
            x=setInterval( move,3000 )
        } )
        

        //設置點擊方塊/圓點，切換相應的圖片
        //設置點擊事件 或者 進入事件，隨機而動
        $( ".ul_2 li" ).on( "click",function(){
    
     
            //設置下標等於點擊時候的下標
            index=$( this ).index();
            console.log( index )

            //根據點擊時候的下標，顯示對應的圖片，其他圖片隱藏
            $( ".ul >li" ).eq( index ).show( 500 ).siblings().hide( 500 );
            //點擊的小方塊，添加樣式，其他刪除
            $( this ).addClass( "active" ).siblings().removeClass( "active" )
        } )


        //因爲點擊方塊不屬於裝圖片的 ul，所以需要再加一下
        $( ".ul_2 li" ).hover( function(){
    
     
            clearInterval( x )
        },function(){
    
     
            //這裏必須寫 x=上面的計時器 
            //單獨寫的話計時器都會執行，輪播會加速
            x=setInterval( move,3000 )
        } )
        //返回上面，給 move 方法中對應的 點擊方塊 設置樣式
        

        //設置上一張下一張的效果
        // 下一張，直接調用
        $( ".next" ).on( "click",function(){
    
     
            move();
        } )

        //上一張
        $( ".back" ).on( "click",function(){
    
     
            //點一次，下標減一
            index--;

            //第一種、當 下標 小於0時，讓下標等於0，也就是第一張圖
            // if( index < 0 ){
    
     
            //     index=0
            // }

            //第二種、當 下標 小於0時，讓下標再等於最後一個圖對應的下標，也就是跳轉到最後一個圖
            if( index < 0 ){
    
     
                //下標等於 圖片個數減一，即 length-1
                index=$( ".ul li" ).length-1
            }
            console.log( index );

            
            //同上
            $( ".ul li" ).eq( index ).show( 500 ).siblings().hide( 500 )
            $( ".ul_2 >li" ).eq( index ).addClass( "active" ).siblings().removeClass( "active" )
        } )


        //因爲上一個，下一個不屬於裝圖片的 ul，所以需要再加一下停止循環
        $( "button" ).hover( function(){
    
     
            clearInterval( x )
        },function(){
    
     
            //這裏必須寫 x=上面的計時器 
            //單獨寫的話計時器都會執行，輪播會加速
            //重要的事情說三遍
            x=setInterval( move,3000 )
        } )
    </script>
</body>
</html>

回到頂部查看其他代碼

簡化就是 封裝一些重複的
好啦eveyone,今天的就結束啦，下期再見，拜拜