Melanjutkan dari postingan sebelumnya, selanjutnya saya tambahkan effek fade, sehingga terlihat lebih cantik dan menarik. silahkan di pelajari dengan seksama. Jika ingin mencobanya, jangan lupa di sertakan pula file jquerynya, biar bisa berjalan sebagai mana mestinya.
<[hapus]!DOCTYPE html>
<[hapus]html lang="en">
<[hapus]head>
<[hapus]meta charset="UTF-8">
<[hapus]title>Scroller<[hapus]/title>
<[hapus]style>
.scroller{
margin: 50px auto;
width: 300px;
}
.i-scroller{
width: 100%;
}
<[hapus]/style>
<[hapus]script src="js/jquery.min.js"><[hapus]/script>
<[hapus]/head>
<[hapus]body>
<[hapus]div class="scroller">
<[hapus]div class="i-scroller">The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.<[hapus]/div>
<[hapus]div class="i-scroller">Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this occurs, it is often unnecessary to explicitly iterate with the .each() method:<[hapus]/div>
<[hapus]div class="i-scroller">Basically we work our way right down to find the elements with the class 'someclass': $('#container a .someclass'), and then from there work our way back up to the enclosing anchor: .parents('a'), which is where the class 'anotherclass' needs to be added.<[hapus]/div>
<[hapus]/div>
<[hapus]script type="text/javascript">
var opacity = 0;
var incOpacity = 1;
var delay = 50;
var i = 0;
var iMax = $(".scroller").children().length;
function changeScroller() {
opacity = 0;
incOpacity = 1;
$('.scroller').css("opacity", opacity);
$(".i-scroller").each(function( index ) {
if(index == i) {
$(this).css("display", "block");
} else {
$(this).css("display", "none");
}
});
i++;
// cek if i = max
if(i == iMax) {
i = 0;
}
fadeIn();
setTimeout(changeScroller, 5000);
}
function fadeIn() {
opacity = incOpacity / delay;
if(incOpacity <[hapus]= delay) {
$('.scroller').css("opacity", opacity);
setTimeout(fadeIn, 100);
incOpacity++;
}
}
changeScroller();
<[hapus]/script>
<[hapus]/body>
<[hapus]/html>
Demikian , wassalam.
