简易轮播图
直接贴代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>轮播图V3.0版</title> <link rel="stylesheet" href="css.css" type="text/css"> </head> <body> <div id="slide"> <ul class="slide_img" id="slide_img"> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> <li><img src="images/5.jpg" /></li> </ul> <ul class="slide_btn" id="slide_btn"> <li class="btn_active">●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> <div id="btn_pre"><a></a></div> <div id="btn_next"><a></a></div> </div> </body> <script src="slide.js" type="text/javascript" ></script> </html>
/* 样式重置 */ body,div,ul,ul li,img{ margin:0; padding:0; } body{ background: #000; } img{ border:none; } li{ list-style: none; } /* 主要样式 */ #slide{ width:670px; height:240px; margin:100px auto; position:relative; background:#fff; overflow: hidden; } .slide_img{ position: absolute; width:3350px; height:240px; top:0; left:0; } .slide_btn{ position: absolute; width:150px; height:30px; top:210px; left:520px; } .slide_img li{ float:left; } .slide_btn li{ display: block; line-height: 30px; color:#999; float:left; margin-right:6px; } .slide_btn .btn_active{ color:#920; } /* 左右切换按钮 */ #btn_pre a,#btn_next a{ width:25px; height:35px; z-index: 2; position:absolute; } #btn_pre a{ background:url(images/pre_next.png) 0 0; left:0px; top:102px; } #btn_next a{ background:url(images/pre_next.png) 0 -35px; left:645px; top:102px; }
功能介绍： 1.加入了自动播放 2.加入了鼠标移入关闭定时器，移出开启定时器 3.解决了移出鼠标之后不连续播放的bug 4.加入了左右切换功能 5.加入了运动划入划出 BUG： 在最后一张图向第一张图切换时，会出现短暂空白 */ var oDiv=document.getElementById('slide'); var oUl1=document.getElementById('slide_img'); var oUl2=document.getElementById('slide_btn'); var aImg=oUl1.getElementsByTagName('li'); var aBtn=oUl2.getElementsByTagName('li'); var oBtnL=document.getElementById('btn_pre').getElementsByTagName('a')[0]; var oBtnR=document.getElementById('btn_next').getElementsByTagName('a')[0]; for(var i=0;i<aBtn.length;i++){ } var timer=null; var timer_auto=null; var speed=null; var j=0; slide(aBtn,aImg); autoSlide(aBtn,aImg); //轮播图主函数 function slide(btns,imgs){ for(var i=0;i<btns.length;i++){ btns[i].index=i; btns[i].onmouseover=function(){ overslide(this,btns,imgs); }; } } //鼠标触发切换 function overslide(that,btns,imgs){ clearStyle(btns); that.style.color="#920"; move(oUl1,-(that.index)*imgs[0].offsetWidth); //获取索引值 j=that.index+1; } //向左点击切换 oBtnR.onclick=function(){ j++; if(j>=aBtn.length) { oUl1.style.left=aImg[0].offsetWidth+'px'; j=0; } clearStyle(aBtn); aBtn[j].style.color="#920"; move(oUl1,-j*aImg[0].offsetWidth); } //向右点击切换 oBtnL.onclick=function(){ j--; if(j<=-1) { oUl1.style.left=-aImg[0].offsetWidth*5+'px'; j=4; } document.title=j; clearStyle(aBtn); aBtn[j].style.color="#920"; move(oUl1,-j*aImg[0].offsetWidth); } //鼠标移入时关闭定时器 oDiv.onmouseover=function(){ clearInterval(timer_auto); } //鼠标移除时开始定时器 oDiv.onmouseout=function(){ autoSlide(aBtn,aImg); } //自动播放功能函数 function autoSlide(btns,imgs){ clearInterval(timer_auto); timer_auto=setInterval(function(){ clearStyle(btns); if(j>=btns.length) { oUl1.style.left=imgs[0].offsetWidth+'px'; j=0; } btns[j].style.color="#920"; move(oUl1,-j*imgs[0].offsetWidth); j++; },3000); } //清理样式 function clearStyle(btns){ for(var i=0;i<btns.length;i++){ btns[i].style.color="#999"; }; } //运动函数 function move(obj,target){ clearInterval(timer); if(obj.offsetLeft<=target){ speed=67; }else{ speed=-67; } timer=setInterval(function(){ document.title=obj.offsetLeft; if(obj.offsetLeft==target) { clearInterval(timer); }else{ obj.style.left=obj.offsetLeft+speed+'px'; } },30) }
