jquery图片左右切换效果

基础概念

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>
    <style>
        .slider {
            width: 600px;
            overflow: hidden;
        }
        .slider img {
            width: 100%;
            display: none;
        }
        .slider img:first-child {
            display: block;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="slider">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <button id="prev">Previous</button>
    <button id="next">Next</button>

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

            function showImage(index) {
                images.hide();
                images.eq(index).show();
            }

            $('#prev').click(function() {
                currentIndex = (currentIndex - 1 + images.length) % images.length;
                showImage(currentIndex);
            });

            $('#next').click(function() {
                currentIndex = (currentIndex + 1) % images.length;
                showImage(currentIndex);
            });
        });
    </script>
</body>
</html>