标签：
<style> .box { width: 500px; height: 275px; position: relative; margin: 100px auto; } a { text-decoration: none; font-size: 28px; text-align: center; line-height: 80px; display: inline-block; width: 40px; color:#fff; background:rgba(0,0,0,0.6); position: absolute; top:100px; } .box #prev { left:0px; } .box #next { right: 0px; } .box #txt { display: block; background:rgba(255,255,255,0.4); width:100%; text-align: center; position: absolute; bottom:5px; } * { padding: 0px; margin: 0px; } </style>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box" id="box"> <a href="javascript:;" id="prev"><</a> <a href="javascript:;" id="next">></a> <span id="txt">第一张</span> <img src="images/1.jpg" id="img" /> </div> </body> </html>
<script> window.onload=function() { // 0 1 2 3 var aImg=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"];//建立图片路径数组 var aText=["第一张","第二张","第三张","第四张"];//建立文本数组 var i=0;//初始化变量i var prev=document.getElementById(‘prev‘);//获取元素 var next=document.getElementById(‘next‘); var oImg=document.getElementById(‘img‘); var oTxt=document.getElementById(‘txt‘); var oBox=document.getElementById(‘box‘); next.onclick=function() { banner();//调用全局函数banner 继续往下看就可以 } prev.onclick=function() { i--;//每次使i减少1 if(i==-1)//如果i等于-1也就是说轮播图到了第一个还往前点 { i=aImg.length-1;//那么i等于图片数组的数量减少1; 因为数组下标默认从0开始 而length则是真实数据个数儿所以-1就是等于跳到最后一个图片 } oTxt.innerHTML=aText[i];//文本内容等于数组的第i个 oImg.src=aImg[i];//图片路径等于数组的第i个 } banner=function()//函数这里这样写是等于封装了那个i++减少代码量 banner=function 这样写是设置全局函数以供定时器调用 { i++;//每次加1 if(i==aImg.length)//如果i等于图片数组的个数儿 那么说明滚到了最后一个用户还再往后点 { i=0;//既然这样那么i=0 跳回到第一个 } oTxt.innerHTML=aText[i];//同上 oImg.src=aImg[i]; } Timer=setInterval("banner()",3000);//设置定期器没3秒变一次并且加上定时器名称 oBox.onmouseover=function() { clearInterval(Timer);//当主体划过的时候停止定时器 这时候说明用户在浏览轮播图 } oBox.onmouseout=function() { Timer=setInterval("banner()",3000);//划出时 再次开启定时器 } } </script>
我要说的都在注释里 新手看看吧 个人认为写的还算比较详细 望高手批评！
标签：
原文地址：http://www.cnblogs.com/lvyestudy/p/5444435.html
