使用jQuery實現一個簡單的圖片輪播器

雲端運算與程式碼 2024年04月30日 06:47 532 品悟

本文摘要

摘要：本題要求創建一個HTML頁面，包含至少三張圖片，通過jQuery和JavaScript實現圖片的自動輪播，每隔3秒更換一張，並添加淡入淡出效果。同時，需要提供“停止”和“開始”按鈕以控制輪播狀態。這需要通過編寫CSS樣式、使用jQuery的動畫方法和JavaScript的定時器函數等技術手段來完成。

要求：

1. 創建一個HTML頁面，其中包含至少三張圖片，並使用`<img>`標簽顯示它們。

使用jQuery實現一個簡單的圖片輪播器第1张

2. 使用jQuery和JavaScript編寫代碼，使這些圖片能夠自動輪播，每隔3秒鐘更換一張圖片。

3. 在輪播圖片的同時，添加簡單的淡入淡出效果。

4. 提供一個“停止”按鈕，點擊後可以停止圖片輪播。

5. 提供一個“開始”按鈕（如果輪播已停止），點擊後可以重新開始圖片輪播。

提示：

- 你可以使用CSS來設置圖片的基本樣式，如寬度、高度和邊距等。

- 使用jQuery的`.fadeIn()`和`.fadeOut()`方法來實現圖片的淡入淡出效果。

- 使用JavaScript的`setInterval()`函數來設置圖片的自動更換時間。

- 使用jQuery的`.click()`方法來處理按鈕的點擊事件。

- 使用一個全局變量來跟蹤輪播器的狀態（是否正在輪播）。

示例HTML結構：

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>簡單圖片輪播器</title>
    <style>
        #slideshow {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 0 auto;
            overflow: hidden;
        }

        #slideshow img {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        #slideshow img.active {
            display: block;
        }
    </style>
    <script src="https://dm.qunapu.com/jquery/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var current = 0;
            var images = $('#slideshow img');
            var imageCount = images.length;

            function slideshow() {
                images.eq(current).fadeOut(500, function() {
                    current = (current + 1) % imageCount;
                    images.eq(current).fadeIn(500);
                });
            }

            var slideshowInterval = setInterval(slideshow, 3000); // 每3秒更換圖片

            // 停止輪播功能
            $('#stop').click(function() {
                clearInterval(slideshowInterval);
            });

            // 開始輪播功能
            $('#start').click(function() {
                slideshowInterval = setInterval(slideshow, 3000);
            });
        });
    </script>
</head>
<body>
    <div id="slideshow">
        <img src="https://dm.qunapu.com/daima/jstubo/img/8.jpg">
        <img src="https://dm.qunapu.com/daima/jstubo/img/9.jpg">
        <img src="https://dm.qunapu.com/daima/jstubo/img/10.jpg">
    </div>
    <button id="stop">停止輪播</button>
    <button id="start">開始輪播</button>
</body>
</html>

註意：你需要創建`styles.css`和`script.js`文件，並在其中編寫相應的CSS樣式和JavaScript代碼來實現題目要求。