Opacity Slideshow

Opacity Slideshow akan menampilkan efek pergantian gambar yang secara perlahan
menghilang dan
digantikan dengan gambar baru, ini bisa dibuat dengan memanfaatkan opacity yang
diatur dengan css.

<section>
<h3>Opacity Slideshow</h3>
<div id="twd_opa" class="shadow">
<img class='opaque' src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/7.jpg" />
<img src="images/9.jpg" />
</div>

<p id="twd_opa_controls">
<span class="selected">Gambar 1</span>
<span>Gambar 2</span>
<span>Gambar 3</span>
<span>Gambar 4</span>
</p>
</section>

Kode CSS

/* CSS DEMO 1 */
p#twd_opa_controls {
text-align:center;
}
#twd_opa_controls span {
padding-right:2em;
cursor:pointer;
}
#twd_opa {
position:relative;
height:429px;
width:600px;
margin:0 auto 10px;
}
#twd_opa img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}

#twd_opa img.opaque {
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=1);
}

Kode Javascript / Jquery

/* Js DEMO 1 | Opacity Slideshow*/
$(document).ready(function() {
$("#twd_opa_controls").on('click', 'span', function() {
$("#twd_opa img").removeClass("opaque");

var newImage = $(this).index();

$("#twd_opa img").eq(newImage).addClass("opaque");

$("#twd_opa_controls span").removeClass("selected");
$(this).addClass("selected");
});
});