用js原生代码写轮播

本文是用js原生代码写轮播，为自己的难点做一次总结，主要是借鉴老师，而后自己写来了供自己参考。
所以要写轮播图先要写好自己想要的html样式如图一所示
图一 HTML样式
首先要放几张图，就需要先多放两张，比如有1，2，3，4，5张图，那么需要在第五张后面放上1图，在第一张前面放上一张5图，这是为了实现无缝轮播。
第二步为五张图各设置一个span标签的按钮，再设置两个a标签做为前后滚动点击事件
接下来就是如图二所示的css的样式
图二 css样式
为了让图片只在lunbox的盒子中，我们要为其设置高度和宽度，并使用超出隐藏的overflow：hidden，将其他图片隐藏起来，因为要图片左右切换，所以把图片左浮动，使其在一个行内，要设置tubox相对于lunbox左右移动，所以为lunbox设置相对定位relative，然后为tubox设置绝对定位，这样他就会相对于lunbox定位，然后就是改变tubox的left和right值来控制图片的移动，tubox的宽度设置为图片的宽度乘于7（因为有七张图，每张宽度为740px），就是5250px。现在的效果就如图三。
图三，
如图所示，只显示最上面的一张。
然后我们把显示次序的按钮放在正下方，再给按钮里面的span做一下css的样式并设置一个on高亮类。这里css的样式各凭喜好，自己设置，没有固定大概的样式如图四
图四
而后给左右两边做个前后切换的箭头，设置觉得定位，移到左右两边，设置个伪类鼠标移入效果如图五，接下来就是js的部分
实现要获取装图片的盒子tubox，因为我们要为其设置left才能控制轮播，然后获取左右两侧的箭头，并要实现手动轮播，代码如图5
图五
因为我们的图片宽度为750px。所以到最后一张left为-4500时就不能往后点了，后面就是空白页，所以我们要跳转到第二张即-1500px；这样才能正常跳转，同样的，当我们点击上一张到0px，我们希望下次跳转到第四张，即-3000px；然后我们就要修改两个you_pic和zuo_pic的函数如图6
图6
，这样我们就可以循环轮播了，如果要实现自动播放，就可以设置个定时器，最后调用这个函数，就可以自动播放了，再设置鼠标移入移出事件，如图7代码，
图7
这样鼠标移入就会停止，移出就会继续
接下来就是小圆点的动画，为按钮设置一个index的初始值为0，即第一个span的class为on，但出发you_pic函数时，index加一，当触发zuo_pic函数时，index减一，并设置当前index的小圆点的class为on，index必须为全局变量。接下来就如图8修改you_pic和zuo_pic的函数，和图9的小圆点的函数，
图8

图9
最后就是小圆点点击事件，如图10，当点击小圆点时，i就是span的index的值，和全局变量的index作比较，然后重新设置tubox.style.left的值，再把i值复制给全局变量index，最后显示当前的小圆点，这样我们就完成了用js实现轮播的效果，这个比较麻烦，后面我们可以用插件实现更快的轮播。
图10