JS+CSS打造的仿惠惠网带缓冲效果的图片滚动

浏览数：27 / 时间：2015年06月09日

<!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>