0

如何让图片飞到浏览器窗口然后淡出。我需要一张图片从左侧飞入浏览器窗口，然后淡出。然后是下一张照片。我有五张图。我需要他们一次又一次地这样做。下面是我的代码：它不能正常工作。方法一：五张图片，id为“#Slogan0”，“#Slogan1”，...等。一开始，“left”是“-1000px”，第一个是“display”为“block”，其他都是“none”，这样我就可以改变它们让它们消失。“moveNext”是改变图片.

var sloganidPre = "#Slogan";
var slogannum = 0;
sloganid = sloganidPre + slogannum;
window.onload = function(){ 
moveNext();
}

function moveNext(){
cf.moveTo("next");  

if($(sloganid).css("display") == "block") {

    slogannum = (slogannum+1)%5;

    $(sloganid).css("display","none");
    sloganid=sloganidPre+slogannum;
    $(sloganid).css("display","block");
    $(sloganid).animate({left:"30px"});
        $(sloganid).css("opacity","0.2");
}

setTimeout(moveNext, 1500);
}

方法2：向父节点创建新元素。

var sloganidPre = "Slogan";
var slogannum = 0;
var sloganid = "#"+sloganidPre + slogannum;

window.onload = function(){ 

$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;display:block;\"\"><img src=\"img/"+sloganidPre+slogannum+".png\"  /></div>");
$(sloganid).animate({left:'30px',opacity:'0.2'});

moveNext();
}

function moveNext(){

cf.moveTo("next"); 
$("#sloganparent:first-child").empty();

slogannum = (slogannum+1)%5;
sloganid= "#"+sloganidPre+slogannum;

$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;\"><img src=\"img/"+sloganidPre+slogannum+".png\"  /></div>");

var i=0;
for (i=-1000; i<30; i++) {
    document.getElementById(new String(sloganid)).style.left= new String("\""+i+"px\"");
}
setTimeout(moveNext, 1500);                     
}

Jquery 似乎没有得到动态创建的元素。两种方法都不能正常工作。无论如何，我只想知道如何像标题所说的那样部署图片。任何方法都可以。tks 供您考虑。

4

0 回答 0