简单的js焦点幻灯图

焦点幻灯图是一种常见的网页设计元素，用于展示一系列图片或内容，并允许用户通过点击或自动切换来查看不同的项。下面是一个简单的JavaScript焦点幻灯图的实现，包括基础概念、优势、类型、应用场景以及常见问题及解决方法。

基础概念

焦点幻灯图通常由一组图片或内容块组成，这些内容块按照一定的顺序排列，并且一次只显示一个。用户可以通过点击导航按钮或设置自动播放来切换显示的内容。

优势

吸引注意力：动态展示内容可以吸引用户的注意力。
节省空间：可以在有限的空间内展示多个项目。
易于导航：用户可以通过简单的点击或滑动来切换内容。

类型

手动切换：用户通过点击按钮来切换幻灯片。
自动播放：幻灯片按照设定的时间间隔自动切换。
触摸滑动：适用于移动设备，用户可以通过滑动屏幕来切换幻灯片。

应用场景

产品展示：在电商网站上展示多个产品。
新闻更新：在新闻网站上展示最新的新闻头条。
活动宣传：在活动页面上展示活动的不同方面。

示例代码

以下是一个简单的JavaScript焦点幻灯图的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点幻灯图</title>
    <style>
        #slideshow {
            position: relative;
            width: 600px;
            height: 400px;
            overflow: hidden;
        }
        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .slide.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="slideshow">
        <img class="slide active" src="image1.jpg" alt="Image 1">
        <img class="slide" src="image2.jpg" alt="Image 2">
        <img class="slide" src="image3.jpg" alt="Image 3">
    </div>
    <button onclick="prevSlide()">Prev</button>
    <button onclick="nextSlide()">Next</button>

    <script>
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');

        function showSlide(index) {
            slides.forEach((slide, i) => {
                slide.classList.remove('active');
            });
            slides[index].classList.add('active');
        }

        function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            showSlide(currentSlide);
        }

        function prevSlide() {
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            showSlide(currentSlide);
        }

        // 自动播放功能（可选）
        setInterval(nextSlide, 3000);
    </script>
</body>
</html>