Javascript 如何使图片飞入浏览器窗口，然后淡出？

如何使图片飞到浏览器窗口，然后淡出。我需要一张图片从左侧飞入浏览器窗口，然后淡出。然后是下一张照片。我有五张照片。我需要他们一个接一个，一遍又一遍地做。下面是我的代码：它工作不好。 方法1：五张图片中的五张，id为“#Slogan0”，“#Slogan1”，等等。开始时，“左”是“-1000px”，第一张是“显示”是“块”，其他的是“无”，这样我可以更改它们使它们消失。“移动下一步”是更改图片

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

var sloganidPre=“口号”；
var slogannum=0；
var sloganid=“#”+sloganidPre+slogannum；
window.onload=函数（）{
$（“#sloganparent”）。追加(“一个快速的谷歌jQuery飞入给了我这个例子，我需要它们在飞入后消失。0进入然后消失。1进入然后消失。2进入然后消失。3进入然后消失。4进入然后消失。0进入然后消失……。@mplungjanI在谷歌和必应上搜索过。我没有找到更好的方法。