सिंपल ऑटो-प्लेइंग स्लाइड शो - सीएसएस-ट्रिक्स

एचटीएमएल

"स्लाइड" के रूप में div के साथ आवरण, जिसमें कोई भी सामग्री हो सकती है।

   Pretty cool eh? This slide is proof the content can be anything.

सीएसएस

स्लाइडर्स को रैपर के भीतर बिल्कुल स्थित होना चाहिए। इसमें अतिरिक्त पिज़्ज़ का एक छोटा सा हिस्सा है:

#slideshow ( margin: 50px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4); ) #slideshow > div ( position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; )

jQuery जावास्क्रिप्ट

DOM तैयार होने के बाद चलाएँ।

$("#slideshow > div:gt(0)").hide(); setInterval(function() ( $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); ), 3000);