Thursday, July 19, 2012

Auto Rotating Slideshow

<style>
#slideshow {
  width:200px;
  height:100px;
  background-color:#222;
  margin:0 auto;
}

#slideshow img {display:block;}
</style>
<div id="slideshow"></div>
<script>
//<![CDATA[
(function() {
    var container = document.getElementById('slideshow');
    var slide = [
        "images/slide-1.jpg",
        "images/slide-2.jpg",
        "images/slide-3.jpg",
        "images/slide-4.jpg"
		// dst...
        ];
    var count = 0;
    setInterval(function() {
        container.innerHTML = "<img src='"+slide[count]+"' alt='Slide "+(count+1)+"'>";
        count++;
        if (count == slide.length) {
            count = 0;
        }
    }, 3000); // Tiga detik sekali...
})();
//]]>
</script>

Demo

Labels: , ,

4 Comments:

At Thursday, July 19, 2012 at 4:45:00 PM GMT+7, Blogger Surga Kenari said...

awesome :-bd

 
At Thursday, July 19, 2012 at 9:49:00 PM GMT+7, Blogger Bayu Handono said...

kerenn :-bd

 
At Friday, July 20, 2012 at 9:06:00 AM GMT+7, Blogger abang ichal said...

di moz 13 yg sy pakai. ga ada rotatingnya.
atau itu hanya berlaku webkit ya?

 
At Friday, July 20, 2012 at 9:55:00 AM GMT+7, Blogger Taufik Nurrohman said...

Saya pakai Firefox 13.0.1

 

Post a Comment

<< Home