• JQ_简单图片无缝滚动


    /*css*/

    .imgBox{height:100px;position:relative;overflow:hidden;}
    .imgBox ul{position:absolute;9000px;}
    .imgBox li{float:left;60px;height:60px;background:#CCC;border:1px solid #000;margin-right:20px;overflow:hidden;}

    /*jq*/

    var imgRun = function(a,b,c,d){
           var $imgUl = $(a).find("ul");
           var $imgLi = $(a).find("li");
           var $width = $(a).find("li").eq(0).outerWidth(true);
           var $s = 0;
           var $timer1 = null;
           var speed1 = parseInt(d);
           var speed2 = parseInt(d/5);
           $imgLi.clone(true).appendTo($imgUl);
           function runLe(){
               $s--;
               if($s<-$width){
                   $s=0;
                   $(a).find("li:first").appendTo($imgUl);
                   }
               $imgUl.css("left",$s+"px");
               }
            function runRi(){
                $s++;
                if($s>0){
                    $s=-$width;
                    $(a).find("li:last").prependTo($imgUl);
                    }
                $imgUl.css("left",$s+"px");
                }
            $timer1 = setInterval(runLe,speed1);
            $imgUl.hover(function(){
                clearInterval($timer1);
                },function(){
                $timer1 = setInterval(runLe,speed1);
                })
            $(b).mousedown(function(){
                clearInterval($timer1);
                $timer1 = setInterval(runRi,speed2);
                })
            $(b).mouseup(function(){
                clearInterval($timer1);
                $timer1 = setInterval(runLe,speed1);
                })
            $(c).mousedown(function(){
                clearInterval($timer1);
                $timer1 = setInterval(runLe,speed2);
                })
            $(c).mouseup(function(){
                clearInterval($timer1);
                $timer1 = setInterval(runLe,speed1);
                })
        }
    imgRun("#imgRun","#imgRunLe","#imgRunRi",30);

    /*html*/

    <div class="imgBox" id="imgRun">
      <ul>
       <li><img src="../images/i01.jpg" width="60" height="60"/></li>
       <li><img src="../images/i02.jpg" width="60" height="60"/></li>
       <li><img src="../images/i03.jpg" width="60" height="60"/></li>
       <li><img src="../images/i04.jpg" width="60" height="60"/></li>
       <li><img src="../images/i05.jpg" width="60" height="60"/></li>
      </ul>
     </div>
     <a id="imgRunLe">left</a> <a id="imgRunRi">right</a>

  • 相关阅读:
    Android BroadcastReceiver 接收收到短信的广播
    Android ContenObserver 监听联系人数据变化
    Android 通过AIDL在两个APP之间Service通信
    Android studio安装和问题
    Android 底部导航栏实现一 Fragment-replace
    Android ImgView属性
    Android TextView常用属性
    Android颜色配置器
    Android gravity和layout_gravity的区别
    Android 组件的三种点击事件写法
  • 原文地址:https://www.cnblogs.com/somesayss/p/2533250.html
Copyright © 2020-2023  润新知