提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助檔案

前言

隨著網頁的前端布局框架的多元化，我們所實作的網頁，也隨著發展，不斷進步，今天我們先講一個輪播圖的案列，從這個輪播圖案例中實作我們想要得到的效果

一、構造網頁布局？

設計網頁的第一步，要求能夠大致推算出我們需要什么樣的布局從而能夠得到我們所需要的效果，

然后運用html，css來實作我們初步在網頁中的效果呈現，

以下是參考的css 樣式

  /* 輪播圖容器 */
        .lunbo {
            width: 800px;
            height: 350px;
            margin: 20px auto;
            /* 相對定位 */
            position: relative;
        }

        /* 輪播圖圖圖片 */
        .lunbo img {
            width: 800px;
            height: 350px;
        }

        /* 小按鈕 */
        .dot {
            /* 絕對定位 */
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
        }

        .dot li {
            width: 8px;
            height: 8px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

        .dot li.active {
            background-color: tomato;
        }

        /* 箭頭 */
        .arrow {
            width: 50px;
            height: 80px;
            font-size: 30px;
            text-align: center;
            line-height: 80px;
            color: #666;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            cursor: pointer;
        }

        .arrow:hover {
            background-color: rgba(173, 216, 230, 0.5);
        }

        .left {
            left: 10px;
        }

        .right {
            right: 10px;
        }

以下是參考的html樣式

 <div class="lunbo">
        <img class="img" src="">
        <ul class="dot flex j-c">
            <!-- <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
        <div class="left arrow">&lt;</div>
        <div class="right arrow">&gt;</div>
</div>

二、使用步驟

1.引入jquery庫

代碼如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2.撰寫jquery代碼：

代碼如下（示例）：

   //定義圖片陣列

        let imgs = [
            "http://p1.music.126.net/bYpz2EzQtOxLSsKdYFKLlg==/109951166108416305.jpg?imageView&quality=89",
            "http://p1.music.126.net/w5nRr9khPUar7ooD6t-17A==/109951166106560685.jpg?imageView&quality=89",
            "http://p1.music.126.net/PbJe6QR4zDysvMgKJ8VYgQ==/109951166106325434.jpg?imageView&quality=89",
            "http://p1.music.126.net/FrA3j1mgvAmelemjZy3ssw==/109951166107492401.jpg?imageView&quality=89",
            "http://p1.music.126.net/8pnqro4k5TCKE7ZZtnWiuQ==/109951166107492177.jpg?imageView&quality=89",
            "http://p1.music.126.net/ZjnFalihrdOh-nrxxb3yNA==/109951166108228282.jpg?imageView&quality=89"
        ]
         //定義陣列下標
        let index = 0
        //獲取圖片物件
        let $img = $('.img')
        //默認顯示第一張圖片
        $img.attr('src', imgs[0])
       

        //給圖片注冊滑鼠進入事件
        $('.lunbo').mouseenter(function () {
            //清空定時器
            clearInterval(timer)
        })
        //給圖片注冊滑鼠移除事件
        $('.lunbo').mouseleave(function () {
            //重新開啟定時器
            run()
        })

        //左箭頭點擊事件
        $('.left').click(function(){
            if(--index<0) index = imgs.length-1
            //呼叫切換方法
            change()
        })
        //右箭頭點擊事件
        $('.right').click(function(){
            if(++index===imgs.length)index = 0
            //呼叫切換方法
            change()
        })


        //創建點的方法
        function createDot() {
            for (let i = 0; i < imgs.length; i++) {
                //創建點按鈕
                let $li = $('<li>')
                //給點按鈕注冊點擊事件
                $li.click(function () {
                    //設定顯示的下標
                    index = $(this).index()

                    //呼叫切換方法
                    change()

                })
                //將點按鈕添加到ul中
                $('.dot').append($li)
            }
            //默認第一個點的高亮效果
            $('.dot li').eq(index).addClass('active')
        }
        //呼叫創建點的方法
        createDot()

        //圖片的輪播方法
        let timer = null //定義定時器變數，用于控制定時器
        function run() {
            timer = setInterval(() => {
                //更新陣列的下標，如果下標超過陣列長度，則重新歸零
                if (++index >= imgs.length) index = 0
                //呼叫切換方法
                change()
            }, 3000);
        }
        //切換方法
        function change() {
            //根據最新的下標，顯示圖片
            $img.attr('src', imgs[index])
            //切換點的高亮效果
            $('.dot li').eq(index).addClass('active').siblings('.active').removeClass('active')
        }
        //呼叫輪播方法
        run()

1定義圖片陣列

2初始化定義第一張顯示的圖片

3運用定時器以及滑鼠事件的方法控制圖片輪播的效果

總結

這個案例要求我們熟練掌握運動js的滑鼠各種常用事件，以及合理運用定時器方法，以及熟練使用jquery的語法格式與js相結合，
以上就是今天要講的內容，本文簡單介紹了jquery的部分使用，而jquery框架提供了大量能處理資料的函式和方法，