如何实现图片无间断滚动效果。

最新推荐文章于 2024-07-18 15:38:17 发布

HelloCode97

最新推荐文章于 2024-07-18 15:38:17 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：图片滚动 JavaScript HTML

本文链接：https://blog.youkuaiyun.com/weixin_44013609/article/details/88090829

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种实现图片连续滚动的网页设计方法，通过双列表并行布局，配合JavaScript控制滚动条，达到视觉上的无缝滚动效果。适用于前端开发中的动态展示需求。

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

//2019.3.3 没有最好的程序，只有更好的程序。

如何实现图片无间断滚动效果。

个人设计思路：

①我们先把我们想要滚动的图片，放入一个列表（表格）中，按序排列好。然后再创建一个列表（表格），复制上一个列表内的内容。它们必须在同一行。

当然，上述两个列表（表格）都必须放在同一个div中，并且给div的样式中设置好宽高，以及overflow:hidden;（为了移动时隐藏多余部分）。（以上元素皆设置好id,name属性）

②先来说一些属性的用处 scrollLeft：用于获取横向滚动条向右滚动的距离； offsetWidth:它可以获取物体宽度的数值;

③下面来设计代码：我们目的是让图片不停向左滚动，也就是让滚动条不停向右滚动，那么，我们就需要一个方法来执行以下内容：

让scrollLeft的值在间隔时间内不停加固定值（如1），那么我们的内容是有限的，不可能一直自增，因此，必须返回到初始位置，啥时候返回呢？如下所述：

④在视觉上我们必须让效果看上去自然，，所以我们开始就设置了两个相同的内容放在了同一行。

所以，可以想象，当滚动条滚动到第一个列表（表格）的头部，也就是第一个列表（表格）的尾部时，返回到初始位置，这样是天衣无缝的。

⑤将上述过程重复执行，即完成了图片的无间断滚动。

//只有更好程序，没有最好的程序。如果有不同看法，欢迎讨论！

代码如下：

<body>
        <div id="imgdiv" onmouseover="pause()" onmouseout="abs()"  style="overflow: hidden; width: 250px;height: 100px;background-color: #7FFFD4;">
        	<table border="" cellspacing="" cellpadding="">
        		<tr>
        			<td width="500px" id="td1">
        				<table border="" cellspacing="" cellpadding="">
        				    <td><img src="img/1.jpg"></td>
        				    <td><img src="img/2.jpg"></td>
        				    <td><img src="img/3.jpg"></td>
        				</table>
        			</td>
        			<td id="td2" width="500px">
        				<table border="" cellspacing="" cellpadding="">
        				    <td><img src="img/1.jpg"></td>
        				    <td><img src="img/2.jpg"></td>
        				    <td><img src="img/3.jpg"></td>
        				</table>
        			</td>
        		</tr>
    
        	</table>
        </div>
	</body>
	<script type="text/javascript">
		var timer;
		   //下方所使用的id会自动获取
      function abs(){
      	if(td2.offsetWidth-imgdiv.scrollLeft<=0){
                             //滚动的距离-第二列的宽度，代表已经滚动到了第一列的末尾处
      		imgdiv.scrollLeft-=td1.offsetWidth;  //回到原点
      	}else{
      		imgdiv.scrollLeft++;     //否则一直滚动
      	}
      	timer =  setTimeout(abs,10);
      }
      function pause(){
      	clearTimeout(timer);
      }
      abs();
	</script>