<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <!-- 这是引用封装好运动函数 --> <script type="text/javascript" src="https://www.jb51.net/doMove.js"></script> <script type="text/javascript"> window.onload=function(){ /*调用实现轮播*/ carousel("carousel") } function carousel(name){ var oScl=document.getElementById(name); var oUl=oScl.querySelector("ul"); var aLi=oUl.querySelectorAll("li"); var next=document.getElementById("next"); var pre=document.getElementById("pre"); var aIndex=oScl.querySelectorAll(".index span"); var num=0; var index=0; /*给第一个图片最高级层级*/ aLi[0].style.zIndex=5; /*判断定时器存不存在*/ if(!oScl.timer){ oScl.timer=null; } /*这是自动轮播开启*/ oScl.timer=setInterval(function(){ num++; num%=aLi.length; play(); },2000); /*上下页显示、隐藏*/ oScl.onmouseover=function(){ /*移入停止定时器*/ clearInterval(oScl.timer); next.style.display="block"; pre.style.display="block"; } oScl.onmouseout=function(){ next.style.display="none"; pre.style.display="none"; /*移出开启定时器*/ oScl.timer=setInterval(function(){ num++; num%=aLi.length; play(); },2000); } /*点击上下页*/ next.onclick=function(){ num++; num%=aLi.length; play(); } pre.onclick=function(){ if(!aLi[index]){ index=num; } num--; if(num<0){ num=aLi.length-1; } play(); } /*索引点*/ for(var i=0;i<aIndex.length;i++){ aIndex[i].index=i; aIndex[i].onmouseover=function(){ num=this.index; play(); } } /*动画执行函数*/ function play(){ /*判断是否是相同触发点，如索引点的两次移入都是相同的， 如果是不执行,避免连续重复执行 */ if(index!=num){ for(var i=0;i<aLi.length;i++){ /*设置全部层级为1*/ aLi[i].style.zIndex=1; } /*设置上次轮播过的图的层级为2*/ aLi[index].style.zIndex=2; aIndex[index].className=""; aIndex[num].className="active"; index=num; /*设置这次轮播的图透明度为0*/ aLi[num].style.opacity=0; /*设置这是轮播的图的层级为5*/ aLi[num].style.zIndex=5; /*运动函数封装，淡出这次的图*/ doMove(aLi[num],"opacity",10,100); } } } </script> <style> a{ text-decoration: none; color: #555; } #carousel{ font-family: "微软雅黑"; position: relative; width: 800px; height: 400px; margin: 0 auto; } #carousel ul{ list-style: none; margin: 0; padding: 0; position: relative; } #carousel ul li{ position: absolute; z-index: 1; top: 0; left: 0; } .imgBox img{ width: 800px; height: 400px; } .btn{ position: absolute; z-index: 10; top: 50%; width: 45px; height: 62px; margin-top: -31px; text-align: center; line-height: 62px; font-size: 40px; background: rgba(0,0,0,0.4); opacity: alpha(opacity=50); display: none; } #pre{ left: 0; } #next{ right: 0; } #carousel .index{ position: absolute; bottom: 10px; left: 50%; z-index: 10; } #carousel .index span{ width: 15px; height: 15px; border-radius: 50%; background: #87CEFA; display: inline-block; box-shadow:1px 1px 6px #4169E1; } #carousel .index span.active{ background: #4169E1; box-shadow:1px 1px 6px #87CEFA inset; } </style> </head> <body> <div> <ul> <li><a href="#"><img src="https://www.jb51.net/article/1.jpg" alt=""></a></li> <li><a href="#"><img src="https://www.jb51.net/article/2.jpg" alt=""></a></li> <li><a href="#"><img src="https://www.jb51.net/article/3.jpg" alt=""></a></li> <li><a href="#"><img src="https://www.jb51.net/article/4.jpg" alt=""></a></li> <li><a href="#"><img src="https://www.jb51.net/article/5.jpg" alt=""></a></li> </ul> <a href="javascript:;">></a> <a href="javascript:;"><</a> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html>
这个是使用插件做的：responsiveslides.js
基于jquery
