javaScript实现焦点轮播图界面效果（三）

一、左右按钮的切换

1.获取元素并设置索引，这里定义的变量index是用来表示底部小圆点的位置

2.封装左右按钮的点击事件

每点击一次左侧按钮，图片会向右侧滚动一次，div的left值就会增加一个图片的宽度，没点击一次右侧的按钮，图片会向左侧滚动一次，div的left值会减小一个图片的宽度。左右两侧按钮进行的操作很相似，在这里我们封装一个方法。

在这个方法中我们要对滚动的位置做出判断，主要当点击右侧按钮，滚动到最后一张图片的时候，再次点击右侧按钮是要滚动到第一张图片，所以此时left值不能再减小一个图片的宽度，而是让left值为-imgthWidth即一张图片的宽度。当点击左侧按钮，滚动到第一张图片的时候，再次点击左侧按钮是要滚动到最后一张图片，所以此时left值不能再增加一个图片的宽度，而是让left值为-imgthWidt*4.。

3.左右按钮绑定点击事件

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容