JS实战002:带点选的滑动轮播图

前面我们已经实现了在设置好的时间间隔内对图片进行自动轮播，然后点击左右箭头进行图像的切换，当鼠标移入/移出控制轮播图的停止/继续，现在我们新增一个页码（有时候只是个按钮）。

首先我们先来实现底下页码跟随左右切换按钮进行自动切换，这里的原理就是将span的属性进行更改，为了方便我把原来的span按钮改成了a链接，在picture下面我们添加一个page的div，里面附上和轮播图一样多的span元素，这样我们的DOM中就只有页码的span元素了，这样定位起来比较方便。

当然我们也可以通过获取img的数量动态生成页码数量，首先我们需要先获取page元素，然后在page下动态添加span标签，默认第一个span给定一个class，给这个输定定义一个背景色，当我切换页码时把这个class属性动态赋给对应的span标签。

我写了一个showPage函数，然后把这个函数加入到animate方法中，当执行animate时就会触发showPage方法了，这样每次点击切换按钮的时候页码就会随之变换，加上自动属性这样就可以直接载入时就自动切换了，但是现在点击或者将鼠标移入标签还是无法切换到指定的页面，接下来我们开始实现这个功能。

实现任意切换的方法很简单，和我们的上下切换方法很相似，只是把没点击一次将move属性自增1改成当前页的值即可，我这里是直接获取的span标签中的值，如果没有值的话就直接赋值i，当move值到了最后一张图时又回到第一张如此循环即可。

通过以上的新增我们就得到了前面的演示效果了，下面是完整的代码，有兴趣的可以试试：               

       

                                                       

       

            1            2            3       

        <        >   

CSDN有完整实战代码，有兴趣可以看下

https://blog.csdn.net/kevinfan2011/article/details/86690240