JavaScriptのみリテキストスライダー

Question

私はを探していますJavaScript ONLY CSSスライダー。私の前の1つは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/