基于JavaScript实现仿京东图片轮播效果
js实现仿京东图片轮播效果，当鼠标划在窗口上面停止计时器，鼠标离开窗口，开启计时器，鼠标划在页签上面，停止计时器，手动切换，通过定义计时器封装函数run，封装函数changeOption，实现此效果，代码简单易懂，需要的小伙伴直接复制拷贝转走吧。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<styletype="text/css">
*{margin:0;padding:0;list-style:none;}
a{text-decoration:none;color:#fff;}
#flash{width:730px;height:454px;margin:100pxauto;position:relative;cursor:pointer;}
#picli{position:absolute;top:0;left:0;z-index:1;display:none;}
#num{position:absolute;left:40%;bottom:10px;z-index:2;cursor:default;}
#numli{float:left;width:20px;height:20px;border-radius:50%;background:#666;margin:3px;line-height:20px;text-align:center;color:#fff;cursor:pointer;}
#numli.active{background:#f00;}
.arrow{height:60px;width:30px;line-height:60px;text-align:center;display:block;position:absolute;top:45%;z-index:3;display:none;}
.arrow:hover{background:rgba(0,0,0,0.7);}
#flash:hover.arrow{display:block;}
#left{left:2%;}
#right{right:2%;}
</style>
<scripttype="text/javascript">
function$(id){
returntypeofid==='string'?document.getElementById(id):id;
}
window.onload=function(){
varindex=0;
vartimer=null;
varpic=$("pic").getElementsByTagName("li");
varnum=$("num").getElementsByTagName("li");
varflash=$("flash");
varleft=$("left");
varright=$("right");
//单击左箭头
left.onclick=function(){
index--;
if(index<0){index=num.length-1};
changeOption(index);
}
//单击右箭头
right.onclick=function(){
index++;
if(index>=num.length){index=0};
changeOption(index);
}
//鼠标划在窗口上面，停止计时器
flash.onmouseover=function(){
clearInterval(timer);
}
//鼠标离开窗口，开启计时器
flash.onmouseout=function(){
timer=setInterval(run,2000)
}
//鼠标划在页签上面，停止计时器，手动切换
for(vari=0;i<num.length;i++){
num[i].id=i;
num[i].onmouseover=function(){
clearInterval(timer);
changeOption(this.id);
}
}
//定义计时器
timer=setInterval(run,2000)
//封装函数run
functionrun(){
index++;
if(index>=num.length){index=0};
changeOption(index);
}
//封装函数changeOption
functionchangeOption(curindex){
console.log(index)
for(varj=0;j<num.length;j++){
pic[j].style.display="none";
num[j].className="";
}
pic[curindex].style.display="block";
num[curindex].className="active";
index=curindex;
}
}
</script>
</head>
<body>
<divid="flash">
<ulid="pic">
<listyle="display:block"><imgsrc="http://img13.360buyimg.com/da/jfs/t2242/262/578407619/87636/4ffe0c5/56187ed2Nfed9a5b3.jpg"alt=""></li>
<li><imgsrc="http://img13.360buyimg.com/da/jfs/t2143/111/577347825/96150/e27180bd/561889b3N42ee62b5.jpg"alt=""></li>
<li><imgsrc="http://img20.360buyimg.com/da/jfs/t1825/234/1750370913/97529/b9229832/560b5ad3N054605f7.jpg"alt=""></li>
<li><imgsrc="http://img10.360buyimg.com/da/jfs/t2026/215/573306345/95654/a0211937/5618a735N1b3d8423.jpg"alt=""></li>
<li><imgsrc="http://img20.360buyimg.com/da/jfs/t2065/362/579832759/78899/6f349917/5618c680N3752bacc.jpg"alt=""></li>
<li><imgsrc="http://img10.360buyimg.com/da/jfs/t2023/45/384256123/101565/9b6e5daf/5604bdceN8c7d2ccf.jpg"alt=""></li>
</ul>
<olid="num">
<liclass="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<ahref="javascript:;"class="arrow"id="left"><</a>
<ahref="javascript:;"class="arrow"id="right">></a>
</div>
</body>
</html>
以上代码是不是很简单啊，基于javascrit实现仿金东图片轮播效果就制作成功了，由于时间原因没有给大家展示效果图，还请大家见谅。