基于JavaScript实现仿京东图片轮播效果

js实现仿京东图片轮播效果，当鼠标划在窗口上面停止计时器，鼠标离开窗口，开启计时器，鼠标划在页签上面，停止计时器，手动切换，通过定义计时器封装函数run，封装函数changeOption，实现此效果，代码简单易懂，需要的小伙伴直接复制拷贝转走吧。

<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin:0;padding:0;list-style:none;}a{text-decoration: none;color: #fff;}#flash{width: 730px;height: 454px;margin: 100px auto;position: relative;cursor: pointer;}#pic li{position: absolute;top: 0;left: 0;z-index: 1;display: none;}#num{position: absolute;left: 40%;bottom: 10px;z-index: 2;cursor:default;}#num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;}#num li.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><script type="text/javascript">function $（id） {return typeof id==="string"?document.getElementById（id）:id;}window.onload=function（）{var index=0;var timer=null;var pic=$（"pic"）.getElementsByTagName（"li"）;var num=$（"num"）.getElementsByTagName（"li"）;var flash=$（"flash"）;var left=$（"left"）;var right=$（"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（var i=0;i<num.length;i++）{num[i].id=i;num[i].onmouseover=function（）{clearInterval（timer）;changeOption（this.id）;}}//定义计时器timer=setInterval（run,2000）//封装函数runfunction run（）{index++;if （index>=num.length） {index=0};changeOption（index）;}//封装函数changeOptionfunction changeOption（curindex）{console.log（index）for（var j=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><div id="flash"><ul id="pic"><li style="display:block"><img src="http://img13.360buyimg.com/da/jfs/t2242/262/578407619/87636/4ffe0c5/56187ed2Nfed9a5b3.jpg" alt=""></li><li><img src="http://img13.360buyimg.com/da/jfs/t2143/111/577347825/96150/e27180bd/561889b3N42ee62b5.jpg" alt=""></li><li><img src="http://img20.360buyimg.com/da/jfs/t1825/234/1750370913/97529/b9229832/560b5ad3N054605f7.jpg" alt=""></li><li><img src="http://img10.360buyimg.com/da/jfs/t2026/215/573306345/95654/a0211937/5618a735N1b3d8423.jpg" alt=""></li><li><img src="http://img20.360buyimg.com/da/jfs/t2065/362/579832759/78899/6f349917/5618c680N3752bacc.jpg" alt=""></li><li><img src="http://img10.360buyimg.com/da/jfs/t2023/45/384256123/101565/9b6e5daf/5604bdceN8c7d2ccf.jpg" alt=""></li></ul><ol id="num"><li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ol><a href="javascript:;" class="arrow" id="left"><</a><a href="javascript:;" class="arrow" id="right">></a> </div></body></html>

以上代码是不是很简单啊，基于javascrit实现仿金东图片轮播效果就制作成功了，由于时间原因没有给大家展示效果图，还请大家见谅。