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

一、左右按钮的切换

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



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

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



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

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