无缝幻灯片2

最新推荐文章于 2021-06-09 19:26:06 发布

置顶寓言s

最新推荐文章于 2021-06-09 19:26:06 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u011551941/article/details/43604605

版权

javascript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

上一篇写了一个无缝幻灯片。但是一个朋友说。我那个只适合做纯效果。如果在上面有一些操作，就会报错。

比如说:oul.getElementsByTagName(“li”)[0].这个时候没3秒钟返回的节点是一样的。在变化。针对这个需求，我就重新了一个。希望对大家有帮助。

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

寓言s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝幻灯片2

上一篇写了一个无缝幻灯片。但是一个朋友说。我那个只适合做纯效果。如果在上面有一些操作，就会报错。比如说:oul.getElementsByTagName(“li”)[0].这个时候没3秒钟返回的节点是一样的。在变化。针对这个需求，我就重新了一个。希望对大家有帮助。 *{ margin:0;
复制链接

扫一扫

专栏目录