html 轮播_JS CSS实现简单的无缝轮播效果

JS CSS实现简单的无缝轮播效果

因为我没有查看过其他人写的无缝轮播代码,所以我的实现方式可能和他人通常的实现方式有较大的差异。

该程序是通过JS配合CSS的过渡效果实现的。

最终效果除在跨越界面切换界面时的过渡效果如果不为匀速则会较不合适外,其他效果和一般无缝轮播效果并无差异。且可以在html中增删界面。

运行效果:

7452c4b6ec4a427383a6cb56cfb974c8.png

该程序思路:

界面的left值根据界面标签对象在对象数组中的顺序决定。在两张轮播图之间切换时,根据选择方向更改对象在数组中的顺序,重新设置对象left属性值,不需要被显示窗口看到的界面的过渡效果时间值设为0s,需要的则使用过渡效果。

在点击下方按钮,跨轮播图切换时则是算出多个界面使用两个界面切换的时间的平均时间,再使用这个时间应用到每一张需要切换的界面的过渡效果上即可。

代码:

下面是html、css和js的相关代码,可供参考。

但请注意该方案并不是最好的无缝轮播的解决方案,只是众多方案中可能较差的一种。

html:

<!DOCTYPE html>

css:

* 

js:

window

该方案存在很多不足,欢迎大家提出意见,感谢支持。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值