JS原生代码实现图片轮播无缝切换的一种思路

最新推荐文章于 2024-09-21 15:07:21 发布

谢家老树

最新推荐文章于 2024-09-21 15:07:21 发布

阅读量1.6w

点赞数 7

分类专栏： CSS笔记文章标签： javascript 图片轮播无缝切换

本文链接：https://blog.csdn.net/hnxieyi/article/details/51299081

版权

本文介绍了一种使用JavaScript原生代码实现图片轮播无缝切换的方法。通过生成隐藏的外框，创建图片数组，设置两个并排的图片元素并利用定时器进行位置移动，实现图片的平滑过渡。当图片移动到边界时，更新图片地址并回滚到数组开头，形成无缝循环。文章强调了实现过程中的两个关键点，并提供了基础代码示例。

摘要由CSDN通过智能技术生成

JS实现图片轮播是个老生常谈的问题，也是新手的必由之路，在这里提供一种思路，供大家参考：

1.生成DIV做外框，并设置overflow:hidden； // 每个方法都必须有的

2.创建一个数组arr，放置图片地址

3.生成两个并排的图片img1,img2，初始化图片地址为arr[0] arr[1] 并使用绝对定位，便于后面移动图片

4.开一个定时器，间隔一定时间后，img1 img2的left值同时向左移动图片宽度值的像素 //移动的时候可以再开个定时器，做滑动的效果

5.当img1的left值为负图片宽度时，赋予img1的left值为正图片宽度，并且将数组的第3张图片地址赋予img1，继续向左移动

6.当img2的left值为负图片宽度时，赋予img2的left值为正图片宽度，并将数组的第4张图片地址赋予img2，继续向左移动

7.当两张图片的图片地址到了数组的最后时，循环到第一个图片地址。

这个方法的难点在于：

1.两张图片的地址在数组中是逢2累加的

2.当图片的地址到了数组的最后时，需要折回数组的首位

具体代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

最低0.47元/天解锁文章