2016-03-23 24 views
4

Ben bir JavaScript'i arıyorum YALNIZCA css slider. Bir önceki jQuery kullandı ama ne yazık ki sitemde jQuery kullandığımda ve kaydırıcı bir iframe içerisindeyken gerçekten işe yaramaz ve şimdi sitemi çerçevesiz (siteyi yavaşlatıyor) istiyorum.JavaScript SADECE li metin kaydırıcı

Benim önceki bir jQuery ile bu benziyordu:

enter image description here

Benim kod şuna benziyordu:

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

ve ben tamamen aynı ama sadece JavaScript ile ona sahip olmak istiyorum.

Birisi böyle bir site biliyor mu? Google'daki kaydırıcılar hemen hemen hepsi jquery ile birlikte ..

cevap

2

Bunu deneyin.

Biçimlendirme:

<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

+0

Bu işe yarıyor, hoş biri! Paylaşım için teşekkürler. Li ile çalışmasının bir yolu var mı? –

+0

@BobbyJ. Tabii ki! Yeni kemanı gözden geçirin: https://jsfiddle.net/nwL1h75a/3/ –

+0

Lordum ve kurtarıcım. Sağol Daniel! –

0

Vanilla Javascript Slider. Kullanım durumunuz için harika. Umut ediyorum bu yardım eder.

+0

Merhaba colecmc, güzel bir eklenti bulunmaktadır ama aslında bir arıyorum basit düz Javascript komut dosyası :) –

+0

Bu sade js. Hayır, jQuery. Burada ne kadar basit konuşuyoruz? – colecmc

+0

Doğru, ama 10/15 satır kodlu bir komut dosyası gibi demek istiyorum. –

İlgili konular