实现带点选的滑动轮播图效果
前面我们制作了一个简单的走马灯轮播图效果，只能通过切换按钮来上下切换图片，但是通常我们看到轮播图都是带点选的，当我选择哪张图片的时候我们就切换到哪张图，底下图标跟着图片的轮播自动切换。
动态生成轮播页码
我们已经实现了在设置好的时间间隔内对图片进行自动轮播，然后通过左右箭头进行图像的切换。现在新增一个页码（有时候只是个按钮）。首先要实现底下页码跟随左右切换按钮进行自动切换，这里的原理是将span的属性进行更改，为了方便，将原来的span按钮改成了a链接，在picture下面添加一个page的div，里面附上和轮播图一样多的span元素，这样DOM中就只有页码的span元素了，这样定位起来比较方便。
动态生成页码数量并切换页面
可以通过获取img的数量动态生成页码数量，先获取page元素，然后在page下动态添加span标签，默认第一个span给定一个class，给这个输定定义一个背景色，当切换页码时把这个class属性动态赋给对应的span标签。接下来实现class"show"属性的切换，定义一个index与move一样初始值为0，每次点击切换按钮的时候随着加减，然后把这个index带入到span中去遍历属性，将index以外的其他span标签中的class属性清空，然后将index对应的span属性添加class"show"属性，这样对应的span就和图片一样动态的切换起来了。
自动切换及鼠标交互功能实现
编写了一个showPage函数，并将其加入到animate方法中，当执行animate时就会触发showPage方法，这样每次点击切换按钮的时候页码就会随之变换。加上自动属性，这样就可以直接载入时就自动切换了，但是现在点击或者将鼠标移入标签还是无法切换到指定的页面，接下来开始实现这个功能。实现任意切换的方法很简单，和上下切换方法很相似，只需将没点击一次将move属性自增1改成当前页的值即可。通过以上新增功能，得到了前面演示的完整效果。如果对代码感兴趣，可以尝试运行下列完整代码：(代码略)
结语
通过以上步骤，我们成功实现了带点选的滑动轮播图效果，让用户可以方便地选择想要查看的图片。同时，通过自动切换和鼠标交互功能的实现，使得用户体验更加流畅和友好。欢迎大家尝试并优化这段代码，进一步提升用户体验。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
