如何启用JavaScript自动加载功能？

是否有一种方法可以增强我的脚本自动加载，而不是使用按钮。还有一种方法我可以在这个脚本中加入淡入式风格

<script>
var content = [
  "Headline",
  "Headline 1",
  "Headline 2",
  "Headline 3",
];
var msgPtr = 0;
var stopAction = null;

function change() {
  var newMsg = content[msgPtr];
  document.getElementById('change').innerHTML = 'Breaking News: '+msgPtr+'<p>'+newMsg;
  msgPtr++;  msgPtr = (msgPtr % content.length);
}

function startFunction() { change();  stopAction = setInterval(change, 4000); }
function stopFunction() { clearInterval(stopAction); }

</script>

---

使用当前代码，只需添加一个startFunction；然后结束以使其自动启动

让它淡入淡出稍微复杂一些。我会这样做：

// encapsulate in an object this IIFE returns
var headlines = (function () {
    'use strict';
  var content = [
      "Headline",
      "Headline 1",
      "Headline 2",
      "Headline 3",
    ],
    running = false,
    displayForMs = 4000,
    msgPtr = 0,
    stopAction = null,
    display = document.getElementById('change');

  // just updates the message in the element
  function changeMsg() {
    var newMsg = content[msgPtr];
    display.innerHTML = 'Breaking News: '+msgPtr+'<p>'+newMsg;
    msgPtr += 1;
    msgPtr = msgPtr % content.length;
  }

  function hide () {
    display.classList.add('hide');
  }

  function show () {
    display.classList.remove('hide');
  }

  function update () {
    var opacity = window.getComputedStyle(display).opacity;

    // fade out has ended, change message and fade in
    if (opacity === '0') {
      changeMsg();
      show();
    // fade in has ended, start waiting to trigger update
    } else if (opacity === '1') {
        stopAction = setTimeout(hide, displayForMs);
    }
  }

  display.addEventListener('transitionend', update, false);

  function startFunction() {
    running = true;
        // hiding causes an update()
    // update does not trigger if the element
    // is already invisible, show() to ensure
    // it has an opacity over 0
        show();
    // we have to wait for a repaint before calling hide
    // if we don't the hide class will be removed and readded
    // in the same frame too fast for the opacity to change
    // and the update will never fire
    requestAnimationFrame(function () {
      hide();
    });
  }

  function stopFunction() {
    running = false;
    clearTimeout(stopAction);
    // remove hide class just to continue to display
    // message and prevent another call to update
    // in case it was mid-fade out
    display.classList.remove('hide');
  }

  return {
    start: startFunction,
    stop: stopFunction,
    get running () {
        return running;
    }
  };
}());

var toggle = document.getElementById('headline-toggle');
toggle.addEventListener('click', function () {
    if (headlines.running) {
    headlines.stop();
    toggle.textContent = "Resume";
  } else {
    headlines.start();
    toggle.textContent = "Stop";
  }
}, false);

headlines.start();

代码使用CSS转换通过添加和删除隐藏类来隐藏和显示元素。检测元素的不透明度为“0”时，然后调用update，后者通过changeMsg更改消息，然后调用show。show通过删除“hide”类来显示元素。当元素的不透明度为“1”时，将再次调用update，这将触发超时以触发下一次淡出

更新2016-08-29我稍微改变了淡入淡出代码的工作方式。一旦淡入完成，定时器即被触发，允许显示完整displayForMs计数的消息，而不受转换长度的影响。我也改变了一点开始；它不再要求元素在调用时可见。我还向标题添加了一个.running属性，以便您可以查询它当前是否正在运行。JSFIDLE使用这个按钮来使用单个切换按钮，而不是单独的开始和停止按钮

更新2016-09-02 我进一步更新了示例，添加并转换了。运行到getter而不是函数中。这样你就可以做if headlines.running而不是if headlines.running

此外，我还为这个答案写了一篇文章。如果您使用bower，您可以使用bower安装标题音量控制器安装它

使用它，要做一些类似于您在代码中所做的事情，再加上自动启动它，您可以这样做：

var headlineElement = document.getElementById('change'),
  myHeadlines = headlineFader(headlineElement, {
    headlines: [
      'Headline',
      'Headline 1',
      'Headline 2',
      'Headline 3',
    ],
    wait: 4000, // this is optional, the library defaults to 7000
  });

myHeadlines.start();

---

你试过了吗？告诉我们：最基本的方法是在脚本标记中调用startFunction，然后。。。对于淡入淡出，查找CSS过渡

var headlineElement = document.getElementById('change'),
  myHeadlines = headlineFader(headlineElement, {
    headlines: [
      'Headline',
      'Headline 1',
      'Headline 2',
      'Headline 3',
    ],
    wait: 4000, // this is optional, the library defaults to 7000
  });

myHeadlines.start();