Transition de l'image d'arrière-plan avec les effets fadeIn fadeOut lors du chargement de la page sans aucune liaison avec les événements

Question

Je souhaite implémenter un effet de transition d'image d'arrière-plan à l'aide de jquery. Les images doivent changer de l'une à l'autre avec un effet fadeIn fadeOut. Les noms d'image sont dans la base de données, mais récupérés à partir d'un dossier sur mon PC. Je veux que la transition se fasse automatiquement sans écouter les événements comme les événements de clic. Ceci est mon code d'essai de la page php à la page js.

C'est getImages.php

<?php 
error_reporting(E_ALL^E_NOTICE); 

require_once("Connections/imageconn.php"); 

mysql_select_db($database_imageconn,$imageconn); 
$sql1=mysql_query("SELECT * FROM images WHERE ImageID=1",$imageconn)or die(mysql_error()); 
$numofrows=mysql_num_rows($sql1); 
$image_one=mysql_fetch_assoc($sql1); 
$img1=$image_one['Image_name']; 

$sql2=mysql_query("SELECT * FROM images WHERE ImageID=2",$imageconn)or die(mysql_error()); 
$numofrows=mysql_num_rows($sql2); 
$image_two=mysql_fetch_assoc($sql2); 
$img2=$image_two['Image_name']; 

$sql3=mysql_query("SELECT * FROM images WHERE ImageID=3",$imageconn)or die(mysql_error()); 
$numofrows=mysql_num_rows($sql3); 
$image_three=mysql_fetch_assoc($sql3); 
$img3=$image_three['Image_name']; 

$sql4=mysql_query("SELECT * FROM images WHERE ImageID=4",$imageconn)or die(mysql_error()); 
$numofrows=mysql_num_rows($sql4); 
$image_four=mysql_fetch_assoc($sql4); 
$img4=$image_four['Image_name']; 


$data['imageone']=$img1; 
$data['imagetwo']=$img2; 
$data['imagethree']=$img3; 
$data['imagefour']=$img4; 

echo json_encode($data); 
?> 

C'est images.php

$(document).ready(function(){ 
    $.post("getImage.php",{},function(data){ 

      $("#response").toggle(function(){ 
        $(this).html("<img src=\"Images/"+data.imageone+"\"/>"); 
       },function() 
       { 
        $(this).html("<img src=\"Images/"+data.imagetwo+"\"/>"); 
       },function() 
       { 
        $(this).html("<img src=\"Images/"+data.imagethree+"\"/>"); 
       },function() 
       { 
        $(this).html("<img src=\"Images/"+data.imagefour+"\"/>"); 
       }); 

     },"json"); 
}); 

Toute aide serait appréciée.

Answer 1

Étant donné une structure DOM comme:

<div class='wrapper'> 
    <img src='Images/image1.jpg' border='0' /> 
    <img src='Images/image2.jpg' border='0' /> 
    <img src='Images/image3.jpg' border='0' /> 
</div> 

var i = 0; 
var number = $('.wrapper img').size(); 
var tabtimer = self.setInterval(function() { 
    crossFade(i); 
    i++; 
    if (i == number + 1){ i = 0} 
}, 
8000); 

function crossFade(i){ 
    $('.wrapper img:visible').fadeOut(); 
    $('.wrapper img:nth-child('+i+')').fadeIn(); 
}; 

Answer 2

Cela itérer sur vos propriétés JSON, créez les <img> « s dans les DOM, puis les effacer et avec un délai de 1 seconde entre chaque.

var idx = 0; 
for (var i in data) { 

    // Create the image DOM elements 
    var img = $('<img src="Images/' + data[i] + '"/>'); 
    img.css({opacity: 0}); 

    // Add them to their container 
    $('#response').append(img); 

    // Set fadeIn/Out delays 
    var delay = idx++ * 1000; 
    img.delay(delay).fadeIn(); 
    img.delay(delay + 1000).fadeOut();   
}