纯js轮播效果（减速效果）待改进
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=no" /><title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href="css.css" rel="stylesheet" type="text/css" /> <script src="js.js"></script> </head> <body> <div class="z_box"> <div id="move"></div> </div> <div id="z_body"> <ul id="sImg"> <li><img src="1.jpg" width="600" height="300" /></li> <li><img src="2.jpg" width="600" height="300" /></li> <li><img src="3.jpg" width="600" height="300" /></li> <li><img src="4.jpg" width="600" height="300" /></li> <li><img src="5.jpg" width="600" height="300" /></li> <li><img src="6.jpg" width="600" height="300" /></li> </ul> <span id="z_prev"></span> <span id="z_next"></span> <ul id="sNav"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body> </html>
CSS样式
*{ margin:0px; padding:0px; } li{ list-style:none; } .z_box{ width:100%; height:100px; position:relative; left:50px; box-shadow:0px 0px 5px gray; } #move{ width:100px; height:100px; position:absolute; box-shadow:0px 0px 5px blue; left:0px; } #z_body{ width:600px; height:300px; margin:0 auto; overflow:hidden; box-shadow:0px 0px 5px black; position:relative; } #z_body ul#sImg{ height:300px; position:absolute; z-index:665; } #z_body ul#sImg li{ float:left; width:600px; height:300px; border:2px solid blue; } #z_prev{ width:30px; height:30px; box-shadow:0px 0px 5px blue; display:block; position:absolute; left:10px; top:45%; z-index:666; cursor:pointer; } #z_next{ width:30px; height:30px; box-shadow:0px 0px 5px blue; display:block; position:absolute; right:10px; top:45%; z-index:666; cursor:pointer; } #z_body span:hover{ background:#eee; box-shadow:0px 0px 5px yellow; } #sNav{ width:100%; height:30px; position:absolute; bottom:0px; left:0px; text-align:center; z-index:666; } #sNav li{ display:inline; padding:2px 10px; box-shadow:0px 0px 5px red; margin-left:10px; cursor:pointer; } #sNav li:hover{ background:white; box-shadow:0px 0px 5px blue; } .getWidth{ width:100px; height:100px; border:1px solid red; }
JS代码
// window.onload=function(){ var oDiv=document.getElementById("move"); var oDiv1=document.getElementById("z_body"); var oUl=oDiv1.getElementsByTagName("ul"); var oLi=oUl[0].getElementsByTagName("li"); //左右按钮初始化 var oPrev=document.getElementById("z_prev"); var oNext=document.getElementById("z_next"); //小导航初始化 var oNav=document.getElementById("sNav"); var nLi=oNav.getElementsByTagName("li"); //计算移动的距离 var mWidth=oLi[0].offsetWidth; //当前索引值 var k=0; //要用offsetWidth 不然在li上加入border会出现错误 //oUl[0].style.width=parseInt((oLi[0],"width"))*oLi.length+"px"; oUl[0].style.width=oLi[0].offsetWidth*oLi.length+"px"; //初始化小按钮当前样式 nLi[0].style.background="gray"; function sMove(obj,iTarget,vSpeed){ var speed=0; var timer=0; clearInterval(obj.timer); obj.timer=setInterval(function(){ speed=speed>0? Math.ceil((iTarget-obj.offsetLeft)/5):Math.floor((iTarget-obj.offsetLeft)/5); //if(obj.offsetLeft==iTarget){ if(speed==0){ clearInterval(obj.timer); console.log("停止运动!") }else{ console.log("正在运动..."); obj.style.left=obj.offsetLeft+speed+"px"; } //给小按钮添加当前选中样式 if(k<=nLi.length-1 && k!=0){ nLi[(k-1)].style.background=""; nLi[k].style.background="gray"; }else{ nLi[nLi.length-1].style.background=""; nLi[k].style.background="gray"; } },vSpeed); } //自动切换函数 function autoPlay(obj,innerTime,iTar){ setTimeout(function(){ if(k==oLi.length-1){ k=0; }else{ k++; } sMove(obj,-k*mWidth,25); },innerTime); } //开启自动切换 var iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500); //左右按钮事件 oPrev.onclick=function(){ if(k>0){ sMove(oUl[0],-(k-1)*mWidth,25); k--; }else{ k=oLi.length-1; sMove(oUl[0],-k*mWidth,25); } console.log("点击按钮后的k=="+k); }; oNext.onclick=function(){ if(k<oLi.length-1){ sMove(oUl[0],-(k+1)*mWidth,25); k++; }else{ sMove(oUl[0],-(0*mWidth),25); k=0; } console.log("点击按钮后的k=="+k); }; //左右按钮悬浮事件 oNext.onmouseover=function(){ clearInterval(iTimer); }; oNext.onmouseout=function(){ iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500); }; oPrev.onmouseover=function(){ clearInterval(iTimer); }; oPrev.onmouseout=function(){ iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500); }; //鼠标悬浮小按钮 oNav.onmouseover=function(){ clearInterval(iTimer); }; oNav.onmouseout=function(){ iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500); }; //小按钮点击事件 for(var i=0;i<nLi.length;i++){ nLi[i].index=i; nLi[i].onclick=function(){ sMove(oUl[0],-this.index*mWidth,25); for(var j=0;j<nLi.length;j++){ nLi[j].style.background=""; } nLi[this.index].style.background="gray"; k=this.index; }; } }; //获取计算后的样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; //IE }else{ return getComputedStyle(obj,null)[attr]; } }
效果虽然已经完成 但是 还有很多地方需要改进 望大家批评指教！
