基于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实现仿金东图片轮播效果就制作成功了,由于时间原因没有给大家展示效果图,还请大家见谅。