jquery实现小图片滚动的效果代码

要实现小图片滚动的效果，可以使用jQuery来操作DOM元素和CSS样式。以下是一个简单的示例代码，展示了如何使用jQuery实现小图片滚动的效果：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片滚动效果</title>
    <style>
        .scroll-container {
            width: 300px;
            height: 100px;
            overflow: hidden;
            position: relative;
        }
        .scroll-container ul {
            list-style: none;
            padding: 0;
            margin: 0;
            position: absolute;
        }
        .scroll-container li {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <ul>
            <li><img src="image1.jpg" alt="Image 1" width="50" height="50"></li>
            <li><img src="image2.jpg" alt="Image 2" width="50" height="50"></li>
            <li><img src="image3.jpg" alt="Image 3" width="50" height="50"></li>
            <li><img src="image4.jpg" alt="Image 4" width="50" height="50"></li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var $scrollContainer = $('.scroll-container');
            var $scrollList = $scrollContainer.find('ul');
            var itemWidth = $scrollContainer.find('li').outerWidth(true);
            var totalItems = $scrollList.find('li').length;
            var totalWidth = itemWidth * totalItems;

            function scrollImages() {
                $scrollList.animate({
                    marginLeft: -itemWidth
                }, 1000, function() {
                    $scrollList.css('marginLeft', 0).append($scrollList.find('li:first'));
                    scrollImages();
                });
            }

            scrollImages();
        });
    </script>
</body>
</html>

代码解释

HTML结构：
- 创建一个包含图片的<div>容器，内部是一个无序列表<ul>，每个列表项<li>包含一张图片。
- 使用CSS设置容器和图片的样式，确保图片水平排列并且容器有固定的宽度和高度。

jQuery脚本：
- 在文档加载完成后，获取滚动容器和图片列表的jQuery对象。
- 计算每个图片项的宽度和总宽度。
- 定义一个scrollImages函数，使用animate方法实现图片的滚动效果。
- 在动画完成后，将第一个图片项移动到列表末尾，并重新调用scrollImages函数实现循环滚动。