Pemodelan Matematika dan Pemrograman: Trik JQuery Pada Slide Image

JQuery memang merupakan komponen Javascript yang sangat bagus, seperti pada trik kali ini adalah bagaimana membuat slide dua gambar secara bersamaan. Konsepnya: gambar pertama menghilang dan gambar kedua muncul secara bersamaan.

Dengan menggunakan function fadein dan fadeout serta dikombinasikan antara z-index dalam CSS maka menghasilkan slide yang dilakukan seolah-olah bersamaan. script lengkapnya adalah sebagai berikut :

<!doctype html>
<html lang="en">
<head><meta charset="utf-8">
<title>click demo</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css" media="screen">
#cycler{position:relative;}
#cycler img{position:absolute;z-index:1;background-color:white;width:200px}
#cycler img.active{z-index:3}
</style>
</head>
<body>
<input type="button" value="change" id="btn1">
<br>
<div id="cycler">
<img src="Desert.jpg" alt="Image 1" />
<img alt="Image 2" />
</div>
<script>
var aimage=new Array();
aimage[0]="Koala.jpg";
aimage[1]="Desert.jpg";
aimage[2]="Chrysanthemum.jpg";
aimage[3]="Lighthouse.jpg";
i=1;

function cycleImages(){
i++;
if(i==4)i=0;
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index',2);//move the next image up the pile
$next.attr("src",aimage[i%4]);
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$("#btn1").click(function() {
cycleImages();
});

</script>
</body>
</html>

sebagai contoh perhatikan gambar berikut :