Jquery kütüphanesinin fadeOut özelliğini kullanarak div Arkaplanı değiştirebiliriz.Aşağıda belirttiğim kodu kullanarak alttaki çıktıyı elde edebilirsiniz.
<div id="dvImage" style="height: 308px; width: 410px">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var images = ["Chrysanthemum.jpg", "Desert.jpg", "Hydrangeas.jpg", "Jellyfish.jpg", "Koala.jpg", "Lighthouse.jpg", "Penguins.jpg", "Tulips.jpg"];
$(function () {
var i = 0;
$("#dvImage").css("background-image", "url(images/" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#dvImage").fadeOut("slow", function () {
$(this).css("background-image", "url(images/" + images[i] + ")");
$(this).fadeIn("slow");
});
}, 1000);
});
</script>
Ekran Görüntüsü
