無縫幻燈片2

時間 2019-11-24

標籤無縫幻燈片简体版

原文原文鏈接

上一篇寫了一個無縫幻燈片。可是一個朋友說。我那個只適合作純效果。若是在上面有一些操做，就會報錯。html

好比說:oul.getElementsByTagName(「li」)[0].這個時候沒3秒鐘返回的節點是同樣的。在變化。針對這個需求，我就從新了一個。但願對你們有幫助。json

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
           *{
              margin:0;
              padding:0;
           }
           div{
              width: 600px;
              height: 300px;
              overflow: hidden;
               position: relative;
                 margin:0 auto;
           }
           ul{
               position: absolute;
               left:0;
               top:0;
           }
           li{
              width: 600px;
              height: 300px;
              float: left; 
           }
           li.text{
               position: absolute;
               top:0;
           }
        </style>
    </head>
    <body>
        <div id="zd">
            <ul>
                <li style="background:#ff00ff" data-index="0"></li>
                <li style="background:#ff0010" data-index="1"></li>
                <li style="background:#0000ff" data-index="2"></li>
            </ul>
        </div>
        <script>
              var timer=null;
              function $(id){
                  return document.getElementById(id);
              }
               function getClass(obj,name){
                if(obj.currentStyle){
                    return obj.currentStyle[name]//IE
                }else{
                     return getComputedStyle(obj,false)[name]//IE
                }
            }
            function Stratmove(obj,json,funEnd,call){
               clearInterval(obj.timer);
               obj.timer=setInterval(function(){
                   for(var attr in json){
                       var bStop=true,
                           cuur=parseFloat(getClass(obj,attr)),
                           speed=0;
                       if(attr=="opacity"){
                          cuur=Math.round(parseFloat(getClass(obj,attr))*100);
                       }else{
                          cuur=parseFloat(getClass(obj,attr));
                       }
                       speed=(json[attr]-cuur)/8;
                       speed=speed>0?Math.ceil(speed):Math.floor(speed);
                       if(cuur!=json[attr]){
                            bStop=false;
                       }
                       if(attr=="opacity"){
                            obj.style["opacity"]=(cuur+speed)/100;
                            obj.style["filter"]="alpha(opacity="+cuur+speed+")";

                       }else{
                            obj.style[attr]=Math.round(cuur+speed)+"px";
                       }
                       if(bStop){
                          clearInterval(obj.timer);
                          if(call)call();
                       }
                       if(funEnd)funEnd();
                   }
               },30)
            }
              var oul=$("zd").getElementsByTagName("ul")[0],
                  oli=oul.getElementsByTagName("li"),
                  u=0,
                  oliW=oli[0].offsetWidth;
                  for (var i = 0; i < oli.length; i++) {
                      oli[i].className="text";
                      oli[i].style.left=oliW*i+"px";
                  };
            var timersd=setInterval(function(){
                   for (var i = 0; i < oli.length; i++) {
                           calls(i);
                           var oliL=oli[i].offsetLeft;
                           if(oliL%oliW==0){
                              Stratmove(oli[i],{"left":oliL-oliW},null);
                           } 
                      };
            },3000)
            function calls(z){
                   var oliL=oli[z].offsetLeft;
                      if(oli[z].offsetLeft==-oliW){
                       oli[z].style.left=oliW*(oli.length-1)+"px";
                  }

            }
        </script>
    </body>
</html>

演示地址: http://runjs.cn/detail/ivpslp2r

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。