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

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">
  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值