如何减少跑马灯循环的时间间隔？

Question

我的代码片段如下，

  

<div class="row">
      <h3 class="news_title"> Latest Events </h3>
      <marquee behavior="scroll" loop="infinite" direction="up" scrollamount="2" onmouseover="this.stop();" style="height:200px" onmouseout="this.start();">
        <ul>
          <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…t-day-15-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – EDUCATION DEVELOPMENT DAY 15.07.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-03-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – CLUB INAUGURATION – 03.07.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-18-06-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – FATHER’S DAY CELEBRATION – 18.06.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ation-16-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – RAMZAN CELEBRATION – 16.07.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ition-20-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – ENVIRONMENT DAY COMPETITION – 20.07.2</a></li>
        </ul>
      </marquee>
  </div>

这里我用跑马灯一个接一个地循环了一组事件，如果第一组事件结束，那么第二组事件到运行还有很多时间。我的要求是，我需要在第一组事件之后继续进行下一组事件，并且只有很少的时间间隔..怎么做？

Answer 1

您将 scrollamount 设置为 2 ，将其删除并回退到正常的选取框行为。我已经更新了下面的代码片段：

<div class="row">
      <h3 class="news_title"> Latest Events </h3>
      <marquee behavior="scroll" loop="infinite" direction="up" onmouseover="this.stop();" style="height:200px" onmouseout="this.start();">
        <ul>
          <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…t-day-15-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – EDUCATION DEVELOPMENT DAY 15.07.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-03-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – CLUB INAUGURATION – 03.07.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-18-06-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – FATHER’S DAY CELEBRATION – 18.06.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ation-16-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – RAMZAN CELEBRATION – 16.07.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ition-20-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – ENVIRONMENT DAY COMPETITION – 20.07.2</a></li>
        </ul>
      </marquee>
  </div>

Answer 2

这使用了 SCROLLAMOUNT 和 SCROLLDELAY

的组合

参考：marquee reference

  

<div class="row">
      <h3 class="news_title"> Latest Events </h3>
      <marquee SCROLLAMOUNT=5 SCROLLDELAY=10 behavior="scroll" loop="infinite" direction="up" scrollamount="2" onmouseover="this.stop();" style="height:200px" onmouseout="this.start();">
        <ul>
          <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…t-day-15-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – EDUCATION DEVELOPMENT DAY 15.07.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-03-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – CLUB INAUGURATION – 03.07.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-18-06-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – FATHER’S DAY CELEBRATION – 18.06.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ation-16-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – RAMZAN CELEBRATION – 16.07.2015</a></li>
          <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ition-20-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – ENVIRONMENT DAY COMPETITION – 20.07.2</a></li>
        </ul>
      </marquee>
  </div>

正如其他人所建议的那样，此功能已过时并尽量避免使用它。

Here 是一些您可以像选取框一样使用的替代方法。

Another 使用纯 css 动画效果的替代方案，如选取框

如果你对插件感兴趣(jQuery)，你可以通过以下方式：

首先包括这个：

<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

字幕内容：

<div class="marquee">jQuery marquee is the best <b>marquee</b> plugin in the world</div>

包括css:

.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

Javascript:

$('.marquee').marquee();

marquee plugin reference

Answer 3

  var zxcMarquee = {

            init: function (o) {
                var mde = o.Mode, mde = typeof (mde) == 'string' && mde.charAt(0).toUpperCase() == 'H' ? ['left', 'offsetWidth', 'top', 'width'] : ['top', 'offsetHeight', 'left', 'height'], id = o.ID, srt = o.StartDelay, ud = o.StartDirection, p = document.getElementById(id), obj = p.getElementsByTagName('DIV')[0], sz = obj[mde[1]], clone;
                p.style.overflow = 'hidden';
                obj.style.position = 'absolute';
                obj.style[mde[0]] = '0px';
                obj.style[mde[3]] = sz + 'px';
                clone = obj.cloneNode(true);
                clone.style[mde[0]] = sz + 'px';
                clone.style[mde[2]] = '0px';
                obj.appendChild(clone);
                o = this['zxc' + id] = {
                    obj: obj,
                    mde: mde[0],
                    sz: sz
                }
                if (typeof (srt) == 'number') {
                    o.dly = setTimeout(function () { zxcMarquee.scroll(id, typeof (ud) == 'number' ? ud : -1); }, srt);
                }
                else {
                    this.scroll(id, 0)
                }
            },

            scroll: function (id, ud) {
                var oop = this, o = this['zxc' + id], p;
                if (o) {
                    ud = typeof (ud) == 'number' ? ud : 0;
                    clearTimeout(o.dly);
                    p = parseInt(o.obj.style[o.mde]) + ud;
                    if ((ud > 0 && p > 0) || (ud < 0 && p < -o.sz)) {
                        p += o.sz * (ud > 0 ? -1 : 1);
                    }
                    o.obj.style[o.mde] = p + 'px';
                    o.dly = setTimeout(function () { oop.scroll(id, ud); }, 50);
                }
            }
        }

        function init() {

            zxcMarquee.init({
                ID: 'marquee1',     // the unique ID name of the parent DIV.                        (string)
                Mode: 'Vertical',   //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
                StartDelay: 2000,   //(optional) the auto start delay in milli seconds'.            (number, default = no auto start)
                StartDirection: -1  //(optional) the auto start scroll direction'.                  (number, default = -1)
            });

            zxcMarquee.init({
                ID: 'marquee2',     // the unique ID name of the parent DIV.                        (string)
                Mode: 'Vertical', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
                StartDelay: 2000,   //(optional) the auto start delay in milli seconds'.            (number, default = no auto start)
                StartDirection: -1  //(optional) the auto start scroll direction'.                  (number, default = -1)
            });

        }

        if (window.addEventListener)
            window.addEventListener("load", init, false)
        else if (window.attachEvent)
            window.attachEvent("onload", init)
        else if (document.getElementById)
            window.onload = init

   .container {
            position: relative;
            width: 300px; /*marquee width */
            height: 300px; /*marquee height */
            overflow: hidden;
            background-color: white;
            border: 3px solid orange;
            padding: 2px;
            padding-left: 4px;
        }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title>
    
</head>

<body>
    <div id="marquee1" class="container" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">
        <div style="position: absolute; width: 98%;">

            <ul>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…t-day-15-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – EDUCATION DEVELOPMENT DAY 15.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-03-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – CLUB INAUGURATION – 03.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-18-06-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – FATHER’S DAY CELEBRATION – 18.06.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ation-16-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – RAMZAN CELEBRATION – 16.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ition-20-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – ENVIRONMENT DAY COMPETITION – 20.07.2</a></li>
            </ul>
        </div>
    </div>
       
       
          <div id="marquee2" class="container" onmouseover="zxcMarquee.scroll('marquee2',0);" onmouseout="zxcMarquee.scroll('marquee2',-1);">
        <div style="position: absolute; width: 98%;">

            <ul>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…t-day-15-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – EDUCATION DEVELOPMENT DAY 15.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-03-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – CLUB INAUGURATION – 03.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-18-06-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – FATHER’S DAY CELEBRATION – 18.06.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ation-16-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – RAMZAN CELEBRATION – 16.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ition-20-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – ENVIRONMENT DAY COMPETITION – 20.07.2</a></li>
            </ul>
        </div>
    </div>
       
</body>


</html>

如何减少跑马灯循环的时间间隔？

How to reduce the time interval of marquee loop?

html

javascript

marquee