饥人谷技术博客

轮播示例代码

2017-12-06  本文已影响0人  汤初景

轮播的实现原理是怎样的?

将图片排成一行,隐藏超出范围的图片,并在第一张图片前添加最后一张图片,在最后一张图片后添加第一张图片,当触发点击下一张图片的事件时,根据方向移动图片位置来滚动显示图片,滚动到最后一张图片或第一张图片时,再次滚动要跳转到第一张的图片或最后一张图片的位置

轮播可以抽象出的函数

playNext(len)    //点击下一页按钮
playPre(len)     //点击上一页按钮

无限循环轮播
渐变轮播

上一篇 下一篇

猜你喜欢

热点阅读