实现原理
首先定义一个div,设置width和height,然后在这个div里面再定义一个div2,该div的宽度为父div的宽度的n倍,其中n表示图片的张数,在这个div2里面放置需要进行轮播的所有图片,设置每张图片的宽度为一个最外层父类div的宽度,高度都是相同的
然后使用js定义一个轮播的函数,每指定时间执行一次轮播函数,通过使用js提供的时间片来实现。轮播函数的思路为:在js外部定义一个全局变量remain,初始化值为0,即表示当前的图片的索引,然后在轮播函数里面对remain变量进行自增,再通过remain来设置要到达的图片的left偏移量,在这里需要对remain进行溢出判断
最后在最外层div元素里面再次定义一个与div2同级的div21,用于定义点击的圆形按钮。并设置点击事件,为了点击方便,在每个圆形按钮标签中定义一个data-index属性,指定所点击对应的图片的索引位置。在这里,圆心按钮标签我们使用span标签,然后通过设置它的border和border-radius来画出圆形按钮,在按钮事件函数中,同样是通过remain来设置要到达的图片的left偏移量,不过不是自增,而是修改成对应的data-index的值,同时需要注意的是:在按钮点击事件中,我们应该要清除自动轮播的时间片,以防止发生碰撞,影响视觉体验和效果
代码实现
页面布局
<div class="carousel">
<div class="list">
<img src="images/carousel/car1.jpg" />
<img src="images/carousel/car2.jpg" />
<img src="images/carousel/car3.jpg&