jquery 图片轮换

基础概念

jQuery 图片轮换是一种网页设计技术，用于在网页上自动或手动切换显示不同的图片。这种技术通常用于创建视觉效果，吸引用户的注意力，或者展示一系列相关的图片。

类型

自动轮换：图片按照设定的时间间隔自动切换。
手动轮换：用户通过点击按钮或其他交互方式手动切换图片。
淡入淡出效果：图片切换时带有淡入淡出的动画效果。
滑动效果：图片切换时带有滑动动画效果。

应用场景

网站首页：用于展示公司的产品或服务。
广告位：用于展示广告图片，吸引用户的注意力。
新闻网站：用于展示最新的新闻图片。
电子商务网站：用于展示商品图片。

示例代码

以下是一个简单的 jQuery 图片轮换示例，使用自动轮换和淡入淡出效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 图片轮换</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .slider {
            position: relative;
            width: 600px;
            height: 400px;
            overflow: hidden;
        }
        .slider img {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .slider img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="slider">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>

    <script>
        $(document).ready(function() {
            var images = $('.slider img');
            var currentIndex = 0;

            function showImage(index) {
                images.removeClass('active').css('opacity', 0);
                images.eq(index).addClass('active').css('opacity', 1);
            }

            function nextImage() {
                currentIndex = (currentIndex + 1) % images.length;
                showImage(currentIndex);
            }

            setInterval(nextImage, 3000); // 每 3 秒切换一次图片
        });
    </script>
</body>
</html>