无法运行fadein-fadeout图片横幅

时间:2013-06-05 16:00:12

标签: image slideshow fadein fadeout banner

我是jquery的新手我在运行此代码时非常需要一些帮助。我正在尝试使用函数fadingbanner()调用自身创建一个淡入淡出的图像横幅,其中包含div标签内的4个图像递归并由settimeout函数启动。但由于某种原因它不起作用。请帮助....

<HTML>
<HEAD>
<script type= "text/javascript" src="C:\Documents and Settings\A\Desktop\jquery-1.9.1.js"></script>
<SCRIPT>

<div>

<img src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg"   id = "i1">

<img src = "C:\Documents and Settings\A\Desktop\web_files\temp2.jpg"   id = "i2">

<img src = "C:\Documents and Settings\A\Desktop\web_files\temp3.jpg"   id = "i3">

<img src = "C:\Documents and Settings\A\Desktop\web_files\temp4.jpg"   id = "i4">

</div>

function fadingbanner()
{
$(document).ready(function(){
$("#i1").fadeOut(2000,function(){
$("#i2").fadeIn(2000,function(){
$("#i2").fadeOut(2000,function(){
$("#i3").fadeIn(2000,function(){
$("#i3").fadeout(2000,function(){
$("#i4").fadeIn(2000,function(){
$("#i4").fadeout(2000,function(){ 
fadingbanner();

});
});
});
});
});
});
});

}
</SCRIPT>
</HEAD>
<BODY>
<IMG NAME = "bannerimage" src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" height = "200" width = "600" onload = "settimeout("fadingbanner()",1000)">
</BODY>
</HTML>

1 个答案:

答案 0 :(得分:0)

取出功能,它应该可以正常工作。它只定义一个函数而从不运行它。如果它确实运行了它,它所做的就是安排代码在文档完成加载时运行。

您还想在开头隐藏第一张照片以外的所有照片。

所以应该是这样的:

$(document).ready(function(){
    $("#i2, #i3, #i4").hide();
    $("#i1").fadeOut(2000,function(){
        ... all that other stuff
    });
});

这是一个显示它的小提琴:http://jsfiddle.net/ePBkX/1/

我从附带的小提琴中借用了那些你可能想要阅读的图片:jQuery fade out then fade in