首页 > 代码库 > JS+CSS打造的仿惠惠网带缓冲效果的图片滚动
JS+CSS打造的仿惠惠网带缓冲效果的图片滚动
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS打造的仿惠惠网带缓冲效果的图片滚动丨上谷战国红|亿诚</title> <style>* {margin:0;padding:0}</style> <!-- Jquery library --> <script type="text/javascript"> window.onload=function(){ var oTab=document.getElementById("tab-wrap"); var oList=oTab.getElementsByTagName("ul")[0]; var aLi=oTab.getElementsByTagName("li"); var aImg=oTab.getElementsByTagName("img"); var aDiv=oTab.getElementsByTagName("div"); var sWidth=aImg[0].offsetHeight; var index=i=0; var timer=playTimer=null; var bOrder=true; var aTmp=[]; var aLib=[0]; var aClor=[["#DF2526","#00B5E4"],["#AAC901","#DF2018"],["#07FFF1","#FF650F"],["#9670C3","#49BCFD"]]; // for(i=0;i<aLi.length;i++){ aTmp.push("<li></li>") } var oCount=document.createElement("ul"); oCount.className="count"; oCount.innerHTML=aTmp.join(""); oTab.appendChild(oCount); // var aBtn=oTab.getElementsByTagName("ul")[1].getElementsByTagName("li"); for(i=0;i<aBtn.length;i++){ aBtn[i].index=i; aBtn[i].onclick=function(){ index=this.index; aLib.push(index); if(aLib.length>2){aLib.shift()}; for(i=0;i<aBtn.length;i++){ aBtn[i].className=""; aLi[i].style.zIndex=100; aLi[i].style.display="none"; } aBtn[index].className="current"; aLi[index].style.zIndex=200; aLi[index].style.top=sWidth+"px"; aLi[index].style.display="block"; aLi[aLib[0]].style.display="block"; aLi[index].style.background=aClor[index][0]; aDiv[index].style.background=aClor[index][1]; if(aLib[0]!=aLib[1]){ showMove(aLi[index]) }else { aLi[index].style.top=0; } } } // aBtn[index].className="current"; aLi[index].style.zIndex=200; aLi[index].style.background=aClor[index][0]; aDiv[index].style.background=aClor[index][1]; autoPlay(); // oTab.onmouseover=function(){ clearInterval(playTimer); } oList.onmouseout=function(){ autoPlay(); } // function autoPlay(){ playTimer=setInterval(function(){ index==aBtn.length-1 && (bOrder=false); index==0 && (bOrder=true); bOrder ? index++ : index--; //console.log(index); aBtn[index].onclick(); },5000) } // function showMove(obj){ clearInterval(timer); timer=setInterval(function(){ doMove(obj) },30) } // function doMove(obj){ var iSpeed=obj.offsetTop/10; iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); obj.offsetTop<=0 ? clearInterval(timer) : obj.style.top=obj.offsetTop-iSpeed+"px"; } } </script> <!-- Site styles --> <style> body{background:#000; text-align:center;font:12px/20px Arial;} #tab-wrap {width:100%;position:relative;overflow:hidden;} #tab-wrap .list {position:relative;height:252px;} #tab-wrap .list li {position:absolute;top:0;left:0;width:100%;height:252px;} #tab-wrap .list li img {margin:0 auto;width:990px;} #tab-wrap .list li .bg-right {position:absolute;top:0;right:0;width:50%;height:252px;z-index:-1;} #tab-wrap .count {position:absolute;left:50%;width:10px;height:100px;top:100px;margin-left:470px;z-index:300;} #tab-wrap .count li {float:left;width:10px;height:10px;background:#ccc;margin-bottom:10px;} #tab-wrap .count li:hover{cursor:pointer;} #tab-wrap .count li.current {background:#85BE2E;} </style> </head> <body> <div id="tab-wrap"> <ul class="list"> <li> <img src="/imagesforcode/201211/21116640990.jpg" width="990" height="252" /> <div class="bg-right"></div> </li> <li> <img src="/imagesforcode/201211/211164436085.jpg" width="990" height="252" /> <div class="bg-right"></div> </li> <li> <img src="/imagesforcode/201211/211171259810.jpg" width="990" height="252" /> <div class="bg-right"></div> </li> <li> <img src="/imagesforcode/201211/211172831190.jpg" width="990" height="252" /> <div class="bg-right"></div> </li> </ul> </div> </body> </html> <br><br><hr>
JS+CSS打造的仿惠惠网带缓冲效果的图片滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。