javaScript实现焦点轮播图界面效果(三)

来源:互联网 发布:男女打架差距 知乎 编辑:程序博客网 时间:2024/06/05 08:38

一、左右按钮的切换

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


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

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


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

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


0 0
原创粉丝点击