js焦点图代码

JavaScript焦点图（也称为轮播图或幻灯片）是一种在网页上展示多张图片，并自动或手动切换图片的交互式组件。它广泛应用于网站首页、产品展示、新闻发布等场景，以吸引用户的注意力并提供丰富的视觉体验。本文将详细介绍如何使用JavaScript来实现一个基本的焦点图功能。

焦点图的基本构成

一个典型的焦点图由以下几个部分组成：

容器：用于包裹所有图片和导航元素的HTML元素。
图片列表：焦点图中展示的所有图片。
指示器：显示当前图片位置的导航点或按钮。
前/后按钮：允许用户手动切换到上一张或下一张图片的按钮。

HTML结构

首先，我们需要创建一个HTML结构来定义焦点图的布局。以下是一个简单的示例：

CSS样式

接下来，我们需要为焦点图添加一些基本的CSS样式，以确保它在网页上正确显示。以下是一个简单的CSS样式示例：

.focusPic {
    position: relative;
    width: 600px;
    height: 400px;
    overflow: hidden;
}

.picList img {
    width: 100%;
    height: auto;
    display: none; /* 初始时隐藏所有图片 */
}

.indicators span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #ccc;
    margin: 5px;
    cursor: pointer;
}

.indicators .active {
    background-color: #333;
}

.prevBtn, .nextBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.prevBtn {
    left: 10px;
}

.nextBtn {
    right: 10px;
}

JavaScript逻辑

最后，我们需要编写JavaScript代码来控制焦点图的行为。以下是一个简单的JavaScript实现示例：

document.addEventListener('DOMContentLoaded', function() {
    var picList = document.querySelector('.picList');
    var images = picList.getElementsByTagName('img');
    var indicators = document.querySelectorAll('.indicators span');
    var prevBtn = document.querySelector('.prevBtn');
    var nextBtn = document.querySelector('.nextBtn');
    var index = 0;

    function showPic(index) {
        images[index].style.display = 'block';
        indicators[index].classList.add('active');
    }

    function nextPic() {
        index = (index   1) % images.length;
        showPic(index);
    }

    function prevPic() {
        index = (index - 1   images.length) % images.length;
        showPic(index);
    }

    prevBtn.addEventListener('click', prevPic);
    nextBtn.addEventListener('click', nextPic);

    indicators.forEach(function(indicator, i) {
        indicator.addEventListener('click', function() {
            index = i;
            showPic(index);
        });
    });

    // 自动轮播
    var intervalId = setInterval(nextPic, 3000);

    // 鼠标悬停暂停
    picList.addEventListener('mouseover', function() {
        clearInterval(intervalId);
    });

    picList.addEventListener('mouseout', function() {
        intervalId = setInterval(nextPic, 3000);
    });

    // 初始化显示第一张图片
    showPic(index);
});