原生JS做图片轮播（自动或手动）
前言
前端基本上靠用现成的封装好的控件的我，今天也算是自己改了一回代码，也自己写了写原生JS，改了一下响应代码。需求是这样的，页面的记录中有多个附件，如果附件是图片的话，查看图片时要多张图片进行轮播，实际需求是不能自动，要手动控制图片切换。说起来也不难，用插件就好了，但是查了好多插件都用到了jquery.min.js，但是这个js文件和项目中用的EasyUI引用的js文件冲突了，解决冲突没成功，所以改方案了，换成原生JS写了，发现还是原生JS好理解。
轮播原理
先看一下我们需要的效果：
动态图太大，请下载查看：http://download.csdn.net/download/u013038861/9539504
下面就是图片轮播的原理，原理并不难，实现起来有点麻烦，不过细心点还是很好玩的。
1、设置li放需要轮播的图片
2、设置li放轮播图片的缩略图
3、设置图片自动轮播
4、设置缩略图的onmouseover事件切换图片
代码展示
<head>
<meta charset="UTF-8">
<title>图片左右轮播</title>
<style>
body, div, ul, li {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
background: #000;
text-align: center;
font: 12px/20px Arial;
}
#box {
position: relative;
width: 600px;
height: 300px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
}
#box .list {
position: relative;
width: 600px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
}
#box .list li {
position: absolute;
top: 0;
left: 0;
width: 490px;
height: 170px;
opacity: 0;
transition: opacity 0.5s linear
}
#box .list li.current {
opacity: 1;
}
#box1 .count {
position: relative;
right: 0;
left:500;
bottom: 5px;
}
#box1 .count li {
color: #fff;
float: left;
width: 50px;
height: 50px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #F90;
opacity: 0.5;
}
#box1 .count li.current {
color: #fff;
opacity: 1;
font-weight: 700;
background: #f60
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li class="current" style="opacity: 1;"><img src="img/1.jpg" width="600" height="300"></li>
<li style="opacity: 0;"><img src="img/2.jpg" width="600" height="300"></li>
<li style="opacity: 0;"><img src="img/3.jpg" width="600" height="300"></li>
<li style="opacity: 0;"><img src="img/4.jpg" width="600" height="300"></li>
<li style="opacity: 0;"><img src="img/5.jpg" width="600" height="300"></li>
<li style="opacity: 0;"><img src="img/6.jpg" width="600" height="300"></li>
</ul>
</div>
<div id="box1">
<ul class="count">
<li class="current"><img src="img/1.jpg" width="50" height="50"></li>
<li class=""><img src="img/2.jpg" width="50" height="50"></li>
<li class=""><img src="img/3.jpg" width="50" height="50"></li>
<li class=""><img src="img/4.jpg" width="50" height="50"></li>
<li class=""><img src="img/5.jpg" width="50" height="50"></li>
<li class=""><img src="img/6.jpg" width="50" height="50"></li>
</ul>
</div>
<script>
var box=document.getElementById('box');
var uls=document.getElementsByTagName('ul');
var imgs=uls[0].getElementsByTagName('li');
var btn=uls[1].getElementsByTagName('li');
var i=index=0; //中间量，统一声明；
var play=null;
console.log(box,uls,imgs,btn);//获取正确
//图片切换, 淡入淡出效果（transition: opacity 0.8s linear）做的
function show(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应
for(i=0;i<btn.length;i++ ){
btn[i].className=''; //每个缩略图都先设置成看不见，然后把当前缩略图设置成可见。
btn[a].className='current';
}
for(i=0;i<imgs.length;i++){ //把图片的效果设置和缩略图片相同
imgs[i].style.opacity=0;
imgs[a].style.opacity=1;
}
}
//切换按钮功能，响应对应图片
for(i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onmouseover=function(){
show(this.index);
clearInterval(play);
}
}
//自动轮播方法
function autoPlay(){
play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明
index++;
index>=imgs.length&&(index=0);//可能有优先级问题，所以用了括号
show(index);
},1000)
}
autoPlay();//调用自动轮播的方法
//div的鼠标移入移出事件
box.onmouseover=function(){
clearInterval(play);
};
box.onmouseout=function(){
autoPlay();
};
</script>
</body>
</html>
另外，需要注意一个点，就是切换缩略图时，需要切换图片。
//切换按钮功能，响应对应图片
for(i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onmouseover=function(){
show(this.index);
clearInterval(play);
}
}
总结
其实这个轮播还是特别简单的，上网查资料的时候，有好多插件做的效果都特别炫，因为需求简单，所以选择了一个简单的。在实现过程中，因为前台的薄弱，那些封装好的插件自己调试不了，js冲突了之后，用的noConflict方法解决，没有成功，只好选用原生的JS，感觉原生的JS还是比较熟悉的。在项目中还有一个需求是，点击某个图片时，图片轮播默认它为第一个图片，只需要知道点击的li的index，然后设置显示图片的相同index的li透明度为1就好了。