jquery不间断滚动图片效果
2025-04-24 22:16
JavaScript
96
0
0
0
标题录入
封面图
要实现一个不间断滚动的图片效果,可以使用 jQuery 来控制滚动行为。以下是一个简单的示例代码,展示如何创建一个不间断滚动的图片效果。 ### HTML 结构 ```html <!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> body { font-family: Arial, sans-serif; } .scroll-container { width: 100%; overflow: hidden; position: relative; } .scroll-content { display: flex; animation: scroll-left 5s linear infinite; } .scroll-content img { margin-right: 20px; height: 100px; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style> </head> <body> <div class="scroll-container"> <div class="scroll-content"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> <img src="image5.jpg" alt="Image 5"> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 使用 jQuery 实现不间断滚动 var $container = $('.scroll-container'); var $content = $('.scroll-content'); function startScrolling() { $content.animate({ left: '-=' + $container.width() }, 5000, 'linear', function() { $(this).css('left', '0').append($(this).children().first()); startScrolling(); }); } startScrolling(); }); </body> </html> ``` ### 解释: 1. **HTML 结构**: - `scroll-container` 是包含滚动内容的容器。 - `scroll-content` 包含所有需要滚动的图片。 2. **CSS 样式**: - `.scroll-container` 设置了 `overflow: hidden`,以隐藏超出容器的内容。 - `.scroll-content` 使用了 `flex` 布局,并通过 CSS 动画 `scroll-left` 实现了图片从右向左的滚动效果。 3. **jQuery 实现**: - 使用 `animate()` 方法来模拟滚动效果。 - 每当动画完成时,将第一个图片移动到容器的末尾,从而实现不间断滚动的效果。 ### 运行方式: 1. 将图片替换为你自己的图片路径(如 `image1.jpg`, `image2.jpg` 等)。 2. 打开浏览器查看效果。 这个示例展示了如何使用 jQuery 和 CSS 来实现一个不间断滚动的图片效果。你可以根据需求调整滚动速度、图片数量等参数。
上一篇:
javascript图片大小处理函数
下一篇:
js鼠标滚动放大缩小图片
不间断滚动图片效果
标题录入,一次不能超过6条
蝴蝶效应
T:0.007309s,M:248.03 KB
返回顶部
留言
留言
评论