Jquery和纯JS实现轮播图--左右切换式

一、页面结构
对于左右切换式的轮播图的结构主要分为以下几个部分：
1、首先是个外围部分（其实也就是最外边的整体wrapper)
2、其次就是你设置图片轮播的地方（也就是一个container吧）
3、然后是一个图片组（可以用新的div 也可以直接使用 ul–>li形式）
4、然后是图片两端的左箭头和右箭头
7、然后是一个按钮层，用来定位图片组的index吧,一般放在图片的下方(div 或 ul–>li)

二、CSS样式
左右切换式则是采用图片li 浮动，父层元素ul 总宽为总图片宽，并设定为有限container宽度下隐藏超出宽度的部分;然后当想切换到某序号的图片时，则采用其ul 定位 left样式设定相应属性值实现
比如显示第一张图片初始定位left为0px, 要想显示第二张图片则需要left:-800px 处理;;

三、JS处理
（1）jquery处理：

jquery这样就能实现左右切换式轮播图了，简便，原生JS代码量就有些多了；
（2）原生JS处理：