zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    jenkins本地运行方法
    项目开发规则
    finally与catch的执行
    idea中实现热部署
    vue的错误的ERR!代码ELIFECYCLE
    spring注解的使用
    mysql中with as相关用法8.0之后支持
    stream流遇到的问题
    git解决冲突,在乌龟工具中一定要点击提交
    jquery知识 内部 外部插入元素
  • 原文地址:https://www.cnblogs.com/somesayss/p/2533250.html
Copyright © 2011-2022 走看看