js焦点图自适应屏幕大小显示

基础概念

焦点图（Slider）是一种网页设计元素，用于展示一系列图片或内容，并允许用户通过点击或滑动来切换显示内容。自适应屏幕大小显示意味着焦点图能够根据不同的设备屏幕尺寸自动调整其布局和显示效果。

类型

轮播图：自动或手动切换图片。
幻灯片：通常包含标题和描述，配合图片展示。
无限循环：图片可以无限循环播放。

应用场景

首页展示：用于网站的首页，展示重要信息或产品。
产品介绍：在电商网站上展示产品图片和详情。
新闻动态：在新闻网站上展示最新的新闻图片和摘要。

示例代码

以下是一个简单的JavaScript焦点图实现，能够自适应屏幕大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Slider</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .slider-container {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .slider img {
            width: 100%;
            flex-shrink: 0;
        }
        .slider-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }
        .prev {
            left: 10px;
        }
        .next {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="slider-container">
        <div class="slider" id="slider">
            <img src="image1.jpg" alt="Image 1">
            <img src="image2.jpg" alt="Image 2">
            <img src="image3.jpg" alt="Image 3">
        </div>
        <button class="slider-button prev" onclick="prevSlide()">&#10094;</button>
        <button class="slider-button next" onclick="nextSlide()">&#10095;</button>
    </div>

    <script>
        let currentIndex = 0;
        const slider = document.getElementById('slider');
        const slides = document.querySelectorAll('.slider img');

        function updateSlider() {
            const offset = -currentIndex * 100;
            slider.style.transform = `translateX(${offset}%)`;
        }

        function nextSlide() {
            currentIndex = (currentIndex + 1) % slides.length;
            updateSlider();
        }

        function prevSlide() {
            currentIndex = (currentIndex - 1 + slides.length) % slides.length;
            updateSlider();
        }

        // Optional: Auto-play functionality
        setInterval(nextSlide, 3000);
    </script>
</body>
</html>