JavaScript只有li文本滑块

Question

我正在寻找 JavaScript ONLY css滑块。我之前使用的是jQuery，但遗憾的是，当我在其上使用jQuery并且滑块位于iframe中时，我的网站并没有真正起作用，现在我希望我的网站没有框架（它们使网站变慢）。

我之前用jQuery看起来像这样：

我的代码看起来像这样：

<ul>
  <li>Hallo</li>
  <li>Some more fading text</li>
  <li>Add as many as you like</li>
</ul>

我希望完全相同，但只能使用JavaScript。

有人知道这样的网站吗？ Google上的滑块几乎都是jquery ..

Answer 1

试一试。

标记：

<p>1</p>
<p>2</p>
<p>3</p>

CSS：

p {
  position: absolute;
  transition: opacity .5s ease-in;
}

p + p { opacity: 0; }

JS：

var current = 0,
    slides = document.getElementsByTagName("p");

setInterval(function() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;
}, 1000);

fiddle

Answer 2

香草Javascript滑块。非常适合您的用例。我希望它有所帮助。 http://meandmax.github.io/lory/