Question

我想使用jquery实现背景图像过渡效果。图像应使用fadeIn fadeOut效果从一个更改为另一个。图像名称位于数据库中，但是从我PC上的文件夹中检索。我希望自动进行转换，而不会监听任何事件，例如点击事件。这是我从php页面到js页面的试用代码。

这是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);
?>

这是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");
});

任何帮助都将不胜感激。

Answer 1

给出如下的DOM结构：

<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

这将遍历您的JSON属性，在DOM中创建<img>，然后在每个属性之间以1秒的延迟淡入淡出。

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();         
}

使用fadeIn fadeOut效果的页面加载背景图像转换，不会对事件进行任何绑定

2 个答案: