原生JS做图片轮播（自动或手动）

前言

    前端基本上靠用现成的封装好的控件的我，今天也算是自己改了一回代码，也自己写了写原生JS，改了一下响应代码。需求是这样的，页面的记录中有多个附件，如果附件是图片的话，查看图片时要多张图片进行轮播，实际需求是不能自动，要手动控制图片切换。说起来也不难，用插件就好了，但是查了好多插件都用到了jquery.min.js，但是这个js文件和项目中用的EasyUI引用的js文件冲突了，解决冲突没成功，所以改方案了，换成原生JS写了，发现还是原生JS好理解。

轮播原理

先看一下我们需要的效果：

           

动态图太大，请下载查看：http://download.csdn.net/download/u013038861/9539504

    下面就是图片轮播的原理，原理并不难，实现起来有点麻烦，不过细心点还是很好玩的。

        1、设置li放需要轮播的图片

        2、设置li放轮播图片的缩略图

        3、设置图片自动轮播

        4、设置缩略图的onmouseover事件切换图片

代码展示

           这是在网上找了一个实现的代码，然后改成了想要的样式。其实在html中，我们的需求是动态读取附件图片，然后加载到页面上，所以html中的li都是js拼接完成后放到页面上的。

    另外，需要注意一个点，就是切换缩略图时，需要切换图片。

//切换按钮功能，响应对应图片
for(i=0;i

    这个方法是注册给缩略图的，要注意它加载的时间，是需要在li加载完成之后的。上面说到，项目中的li是用js动态拼接的，是根据数据库的数据来的，所以开始的时候把这个方法写在了页面中，是没有任何效果的，它应该在js加载完li之后加载，才能把方法注册上去。

总结

    其实这个轮播还是特别简单的，上网查资料的时候，有好多插件做的效果都特别炫，因为需求简单，所以选择了一个简单的。在实现过程中，因为前台的薄弱，那些封装好的插件自己调试不了，js冲突了之后，用的noConflict方法解决，没有成功，只好选用原生的JS，感觉原生的JS还是比较熟悉的。在项目中还有一个需求是，点击某个图片时，图片轮播默认它为第一个图片，只需要知道点击的li的index，然后设置显示图片的相同index的li透明度为1就好了。