javascript輪播圖怎麼實現

WBOY原創: 2023-05-26 19:20:061814瀏覽

隨著前端開發技術的不斷發展，JavaScript 已經成為了前端開發中不可或缺的一部分。在網頁設計中，輪播圖是一種非常常見的展示方式，它可以幫助網站更好地呈現圖片、文字等多種內容。本文將介紹如何使用 JavaScript 實作一個簡單的輪播圖。

一、HTML 佈局

首先，我們需要建立輪播圖的 HTML 佈局。這裡採用較簡單的HTML 和CSS 方式建立一個輪播圖容器，如下所示：

<div class="slider">
    <ul class="slider-items">
        <li class="slider-item"><img src="1.jpg"></li>
        <li class="slider-item"><img src="2.jpg"></li>
        <li class="slider-item"><img src="3.jpg"></li>
    </ul>
</div>

其中，.slider 表示輪播圖容器，.slider-items 表示輪播圖項容器，.slider-item 表示單一輪播圖項。我們需要在 .slider-items 中設定 left 屬性，以便在 JavaScript 中控制輪播圖項的移動。

二、JS 實作輪播

1.取得元素

要實作輪播圖，首先需要取得需要操作的元素節點，這裡我們定義一個陣列items，用來儲存輪播圖項，並透過querySelectorAll() 方法取得slider-item 類，程式碼如下：

var slider = document.querySelector('.slider');
var sliderItems = document.querySelectorAll('.slider-item');
var items = [];

for (var i = 0; i < sliderItems.length; i++) {
    items.push(sliderItems[i]);
}

2.設定相關參數

在實現輪播圖的過程中，我們需要設定相關的參數，例如目前選取的項，輪播圖的寬度，設定最後一項與第一項之間進行過渡等。程式碼如下：

var current = 0;
var width = 600;
var height = 400;
var imgCount = items.length;
var animationSpeed = 1000;
var pause = 3000;
var interval;
var sliderContainer = document.querySelector('.slider-items');
sliderContainer.style.width = width * items.length + 'px';
sliderContainer.style.height = height + 'px';

3.實作輪播圖

接下來，我們可以使用 JavaScript 實作輪播圖。具體過程為：

（1）建立 startSlide 函數和 slideLeft 函數。

startSlide()：用來開始輪播圖。在函數中定義了比目前選取項目的下一項，如果目前項為最後一項，則將下一項設為第一項，並透過setInterval() 方法進行輪播圖循環播放；
slideLeft()：用來向左進行輪播。在函數中使用了 animate() 方法進行動畫過渡，完成輪播效果。

function startSlide() {
    interval = setInterval(function () {
        slideLeft();
    }, pause);
}

function slideLeft() {
    if (current === imgCount - 1) {
        current = -1;
    }
    current++;
    animate(sliderContainer, -width * current, animationSpeed);
}

（2）建立 animate 函數，用來實現動畫效果。函數中透過 requestAnimationFrame() 方法實現了動畫的流暢過渡，從而達到更好的輪播效果。

function animate(el, left, speed) {
    var start = el.offsetLeft;
    var destination = left;
    var startTime = new Date().getTime();
    var distance = destination - start;

    function frame() {
        var elapsedTime = new Date().getTime() - startTime;
        var position = easeInOutQuart(elapsedTime, start, distance, speed);
        el.style.left = position + 'px';
        if (elapsedTime < speed) {
            requestAnimationFrame(frame);
        }
    }
    frame();
}

（3）建立緩動函數 easeInOutQuart，用來最佳化動畫效果。

function easeInOutQuart(t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}

（4）最後，我們仍需在 JavaScript 中加入輪播圖的控制功能。這裡我們透過 addEventListener() 方法加入了 mouseenter 和 mouseleave 事件，用來在滑鼠移入和移出時暫停和開始輪播。完整的程式碼如下：

slider.addEventListener('mouseenter', function () {
    clearInterval(interval);
});

slider.addEventListener('mouseleave', function () {
    startSlide();
});

startSlide();

三、完整程式碼

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JavaScript轮播图实现</title>
    <style>
        .slider {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }

        .slider-items {
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .slider-item {
            display: inline-block;
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul class="slider-items">
            <li class="slider-item"><img src="1.jpg"></li>
            <li class="slider-item"><img src="2.jpg"></li>
            <li class="slider-item"><img src="3.jpg"></li>
        </ul>
    </div>
    <script>
        var slider = document.querySelector('.slider');
        var sliderItems = document.querySelectorAll('.slider-item');
        var items = [];

        for (var i = 0; i < sliderItems.length; i++) {
            items.push(sliderItems[i]);
        }

        var current = 0;
        var width = 600;
        var height = 400;
        var imgCount = items.length;
        var animationSpeed = 1000;
        var pause = 3000;
        var interval;
        var sliderContainer = document.querySelector('.slider-items');
        sliderContainer.style.width = width * items.length + 'px';
        sliderContainer.style.height = height + 'px';

        function startSlide() {
            interval = setInterval(function () {
                slideLeft();
            }, pause);
        }

        function slideLeft() {
            if (current === imgCount - 1) {
                current = -1;
            }
            current++;
            animate(sliderContainer, -width * current, animationSpeed);
        }

        function animate(el, left, speed) {
            var start = el.offsetLeft;
            var destination = left;
            var startTime = new Date().getTime();
            var distance = destination - start;

            function frame() {
                var elapsedTime = new Date().getTime() - startTime;
                var position = easeInOutQuart(elapsedTime, start, distance, speed);
                el.style.left = position + 'px';
                if (elapsedTime < speed) {
                    requestAnimationFrame(frame);
                }
            }
            frame();
        }

        function easeInOutQuart(t, b, c, d) {
            if ((t /= d / 2) < 1) 
                return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }

        slider.addEventListener('mouseenter', function () {
            clearInterval(interval);
        });

        slider.addEventListener('mouseleave', function () {
            startSlide();
        });

        startSlide();
    </script>
</body>
</html>

四、總結

到此，我們已經完成了 JavaScript 實作輪播圖的全部程式碼。透過上述範例，我們可以了解使用 JavaScript 實作輪播圖的具體過程，實現了一個簡單且易於理解的輪播圖，掌握了 JavaScript 實作輪播圖的操作方法。希望本文能幫助大家進一步掌握 JavaScript 前端開發技術。

以上是javascript輪播圖怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html 循环 JS 事件

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：簡述JavaScript具體處理過程下一篇：簡述JavaScript具體處理過程

看更多