js实现非常简单的焦点图切换特效实例

2023年6月11日上午1:14 • JavaScript

下面我将详细讲解如何实现JS实现非常简单的焦点图切换特效。

1. 理解需求

在动手编写代码之前，我们需要先清楚自己要做什么。根据题目描述，我们需要实现一个简单的焦点图切换特效，其中最基本的要求就是能够自动轮播图片。除此之外，还可以设置左右切换按钮、底部焦点导航等功能，以便用户手动切换图片。

2. HTML结构

在开始编写JS代码之前，我们需要先构建一个基本的HTML结构。可以使用<ul>作为外层容器，每个轮播项使用<li>包裹，并且在最后追加一个与第一个轮播项相同的图片，这样可以无缝循环轮播。例如：

<div class="slider">
    <ul class="slider-content">
        <li>
            <img src="img1.jpg" alt="图片1">
        </li>
        <li>
            <img src="img2.jpg" alt="图片2">
        </li>
        <li>
            <img src="img3.jpg" alt="图片3">
        </li>
        <!-- 这里追加一个与第一个轮播项相同的图片 -->
        <li>
            <img src="img1.jpg" alt="图片1">
        </li>
    </ul>
</div>

注意，在上述代码中我们给整个轮播图加入了一个父容器，这样可以方便我们对整个轮播图进行样式上的控制。

3. CSS样式

完成HTML结构之后，我们需要对其进行基本的样式控制。特别是对轮播图进行一些定位、尺寸等方面的调整。例如：

.slider {
    position: relative;
    width: 600px;
    height: 300px;
    overflow: hidden;
}

.slider-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 2400px; /*每个轮播项宽度为600px，一共4项*/
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.slider-content li {
    float: left;
    width: 600px;
    height: 300px;
}

.slider-content img {
    display: block;
    width: 100%;
    height: 100%;
}

上述代码中，我们对轮播图进行设置了宽度、高度，并对轮播项进行了浮动和大小尺寸的设置。同时，我们对轮播项中的图片进行了占满整个轮播项的调整。

4. JS代码

接下来进入JS编程环节。为了实现自动轮播及手动切换，我们需要编写一定的JS代码。实现的思路包括：

使用计时器实现自动轮播
使用左右箭头实现手动切换
使用底部导航实现手动切换

4.1 自动轮播

实现自动轮播需要使用计时器setInterval()方法，代码如下：

var slider = document.querySelector('.slider');
var sliderContent = document.querySelector('.slider-content');

//当前播放的位置
var currentPosition = 0;

setInterval(function () {
    currentPosition -= 600; //每次移动一个轮播项的宽度
    sliderContent.style.transform = "translateX(" + currentPosition + "px)";
}, 2000);

上述代码中，我们定义了一个计时器，使其每隔2秒钟执行一次。在计时器中，我们将轮播图向左移动一个轮播项的宽度，并将移动的距离通过设置transform: translateX()样式实现。注意，我们将变量currentPosition初始化为0，而不是一个负数。这是因为我们在轮播到最后一项的时候，需要将当前位置重新设置为0，以实现循环轮播的效果。

4.2 手动切换

实现手动切换需要使用到addEventListener()方法，对左右箭头和底部导航按钮绑定事件。代码如下：

var prevBtn = document.querySelector('#prev-btn');
var nextBtn = document.querySelector('#next-btn');
var navDots = document.querySelectorAll('.nav-dot');

//左箭头按钮事件
prevBtn.addEventListener('click', function () {
    currentPosition += 600;
    if (currentPosition > 0) {
        currentPosition = -1800; //回到最后一个轮播项
    }
    sliderContent.style.transform = "translateX(" + currentPosition + "px)";
});

//右箭头按钮事件
nextBtn.addEventListener('click', function () {
    currentPosition -= 600;
    if (currentPosition < -2400) {
        currentPosition = 0; //回到第一个轮播项
    }
    sliderContent.style.transform = "translateX(" + currentPosition + "px)";
});

//底部导航按钮事件
for (var i = 0; i < navDots.length; i++) {
    navDots[i].addEventListener('click', function () {
        var index = Array.from(navDots).indexOf(this);
        currentPosition = -index * 600;
        sliderContent.style.transform = "translateX(" + currentPosition + "px)";
    });
}

上述代码中，我们对左箭头、右箭头和底部导航按钮分别绑定事件。在事件中，我们根据当前位置进行相应切换并更新轮播位置。