（20）JS实现简单的图片向左无缝滚动

最新推荐文章于 2025-06-29 16:28:34 发布

无人与我共黄昏

最新推荐文章于 2025-06-29 16:28:34 发布

阅读量7.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript案例解析

本文链接：https://blog.youkuaiyun.com/Xuan6251237011/article/details/27831967

JavaScript案例解析同时被 2 个专栏收录

42 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

JavaScript代码

42 篇文章

订阅专栏

本文介绍如何使用JavaScript创建一个简单的图片向左无缝滚动效果。通过设置两个重复的图片列表，当滚动到最左边时，将容器的offsetLeft置为0，由于每次只显示四个图片，因此过渡平滑，实现视觉上的无缝滚动。核心代码未给出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：设置两副重复的图，然后滚动到头的时候将ul的offsetLeft设置为0，但是每次只显示四个，所以看不见那一瞬间的变化，一切近乎完美，代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div1{width: 712px;height: 108px;margin:100px auto;position: relative;background: red;overflow: hidden;}
#div1 ul{position: absolute;left: 0;top: 0;}
#div1 ul li{float:left;width:178px;height:108px;list-style: none;}
</style>

<script type="text/javascript">
window.onload=function(){
 	var oDiv=document.getElementById('div1');
 	var oUl=oDiv.getElementsByTagName('ul')[0];
 	var aLi=oUl.getElementsByTagName('li');

 	oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//变成两副图，然后才能实现无缝滚动

 	oUl.st

了解本专栏