[trick] Membuat Slide Show Fade in dan Fade Out dengan Javascript dan css


<style>
#ss{
opacity:0;
-webkit-transition:opacity 1.0s linear 0s;
transition:opacity 1.0s linear 0s;
}
</style>

<script>

var ss_i = 0;
var ss_array = ['1.jpg','2.jpg','3.jpg','4.jpg'];

function ssNext(){

ss_element.style.opacity = 0;
if(ss_i > (ss_array.length - 2)){
ss_i = 0;
}
ss_element.innerHTML = '<img src="'+ss_array[ss_i]+'" width=100>';
ss_i++;

setTimeout('ssSlide()',1000);
}
function ssSlide(){
ss_element.innerHTML = '<img src="'+ss_array[ss_i]+'" width=100>';
ss_element.style.opacity = 1;
setTimeout('ssNext()',2000);
}
</script>

<div id="ss"></div>
<script>var ss_element = document.getElementById("ss"); ssSlide(); </script>

Leave a comment

1 Comment

  1. Reblogged this on Dinesh Ram Kali..

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: