京东轮播图

实例演示地址：https://liujie1990.github.io/myWork/luobotu/myindex.html

<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var oDiv=$("wrap");
var pic=$("pic").getElementsByTagName("li");
var num=$("num").getElementsByTagName("li");
var left=$("left");
var right=$("right");
var index=0;
var len=pic.length;

left.onclick=function(){
index--;
if(index<0){
index=len-1;
}
change(index);
};
right.onclick=function(){
index++;
if(index>len-1){
index=0;
}
change(index);
};

oDiv.onmouseover=function(){
clearInterval(timer);
};
oDiv.onmouseout=function(){
timer=setInterval(run,2000);
};
timer=setInterval(run,2000);
function run(){
index++;
if(index>len-1){
index=0;
}
change(index);
}
function change(curindex){
for(var i=0;i<len;i++){
pic[i].style.display="none";
num[i].className="";
}
pic[curindex].style.display="block";
num[curindex].className="active";
}
</script>

<div id="wrap">
<ul id="pic">
<li style="display: block;"><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
</ul>
<ul id="num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<a href="javascript:;" class="arrow" id="left"><</a>
<a href="javascript:;" class="arrow" id="right">></a>
</div>

*{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: #fff;}
#wrap{width: 600px;height: 400px;margin: 100px auto;position: relative;cursor: pointer;}
#pic li{display: none;position: absolute;top: 0;left: 0;z-index: 1;}
#num{position: absolute;z-index: 2;bottom: 10px;left: 40%;}
#num li{float: left;width: 20px;height: 20px;margin:3px;border-radius: 50%;line-height: 20px;color: #fff;background: #666;text-align: center;}
#num li.active{background:#f00; }
.arrow{z-index: 3;height: 40px;width: 30px;position: absolute;top: 45%;line-height: 40px;background: rgba(0,0,0,0.3);text-align: center;display: none;}
.arrow:hover{background: rgba(0,0,0,0.7);}
#wrap:hover .arrow{display: block;}
#left{left:2%;}
#right{right:2%;}