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

一、左右按钮的切换

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


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

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


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

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值