如何用 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,今天的就結束啦，下期再見，拜拜

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/239062.html

標籤：其他

上一篇：vue3使用vue-count-to組件

下一篇：計時器實作簡單方法

jQuer 如何實作輪播圖

如何用 jQuery 實作輪播圖

頂部

方便你們復制，直接來一個全部的

html代碼

css代碼

JavaScript代碼

全部代碼