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>
        #main-image {
            width: 300px;
            height: 200px;
        }
        #thumbnail-container {
            display: flex;
            overflow-x: auto;
            margin-top: 10px;
        }
        .thumbnail {
            width: 50px;
            height: 50px;
            margin-right: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img id="main-image" src="image1.jpg" alt="Main Image">
    <div id="thumbnail-container">
        <img class="thumbnail" src="image1.jpg" alt="Thumbnail 1">
        <img class="thumbnail" src="image2.jpg" alt="Thumbnail 2">
        <img class="thumbnail" src="image3.jpg" alt="Thumbnail 3">
        <img class="thumbnail" src="image4.jpg" alt="Thumbnail 4">
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.thumbnail').click(function() {
                var src = $(this).attr('src');
                $('#main-image').attr('src', src);
            });

            $('#thumbnail-container').on('wheel', function(e) {
                e.preventDefault();
                var delta = e.originalEvent.deltaY > 0 ? -1 : 1;
                var $container = $(this);
                var $thumbnails = $container.find('.thumbnail');
                var currentIndex = $thumbnails.index($thumbnails.filter(':focus'));
                var nextIndex = (currentIndex + delta + $thumbnails.length) % $thumbnails.length;
                $thumbnails.eq(nextIndex).focus();
            });
        });
    </script>
</body>
</html>