原理
一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。
code
demo
DOM操作
页面加载完获取元素,然后通过dom元素的事件绑定,实现左右点击和button点击切换图片。
注意在切换到最边缘的图片时,进行判断,跳转至相应图片位置。
定时器,自动轮播
setTimeout&setInterval
事件运用
JS动画
函数递归
无限滚动
参考文章:
手把手原生js轮播图
一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。
code
demo
页面加载完获取元素,然后通过dom元素的事件绑定,实现左右点击和button点击切换图片。
注意在切换到最边缘的图片时,进行判断,跳转至相应图片位置。
setTimeout&setInterval
参考文章:
手把手原生js轮播图
微信打赏
支付宝打赏