Example sharing of jQuery implementation of advertising banner scrolling effect-JS Tutorial-php.cn

Example sharing of jQuery implementation of advertising banner scrolling effect

小云云

Release： 2017-12-30 14:44:34

Original

1487 people have browsed it

This article mainly introduces jQuery to realize the advertising bar scrolling effect in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{padding: 0px;margin: 0px;}
      #list{width: 150px;height: 310px;margin: 0px auto;border: 1px solid #ccc;overflow: hidden;}
      #list li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed #999;}
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <script>
      var marginTop = 0;//注意命名
      var scroll = true; 
      //定时函数，每150毫秒执行一次函数
      setInterval(function(){
        if(scroll){ 
          $("#list li:first").animate(  //第一个li开始执行动画
            {marginTop:marginTop--}, //设置上面的外边距自减
            0,
            function(){  //动画之后执行的函数

              if( -marginTop==$(this).height()+1){ //判断li移动的距离是否超过自身的高度
                var $f = $(this); //复制一个li
                $(this).remove(); //把第一个移除。第一个移除之后，第二个就自动变为第一个
                marginTop=0;
                $f.css("margin-top","0px");
                $("ul").append($f); //把第一个追加加到列表的最后，变成一个无缝连接
              }
            }
          );
        }
      },150);
      $(function(){
        $("ul").hover(function(){scroll = false;},function(){scroll = true;});

      });
    </script>
  </head>
  <body>
    <p id="list">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
      </ul>
    </p>
  </body>
</html>

Copy after login

Related recommendations:

javascript tutorial on how to achieve circular advertising banner effect

Html+CSS floating advertising banner implementation decomposition_HTML/Xhtml_web page production

js implementation of the floating advertising banner code that can be closed at the top of the website_javascript skills

The above is the detailed content of Example sharing of jQuery implementation of advertising banner scrolling effect. For more information, please follow other related articles on the PHP Chinese website!