having trouble running a fadein-fadeout Image banner

Question

I am new in jquery I desperately need some help in running this code.I am trying to create a fade in-fade out image banner with 4 images within div tag, with the help of a function fadingbanner() which calls itself recursively and is initiated by a settimeout function.But for some reason its not working.Please help....

<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>

You might want to add to your question. Tell us what it is doing so we can compare to what you want it to do. — Lee Meador, Jun 05 '13 at 16:03
I just want a normal image banner which is there in homepages of all websites where one picture fades out and another fades in its place.I am trying to create a fade in-fade out image banner with 4 images within a div tag, with the help of a function fadingbanner() which is being called by a setinterval function.But for some reason its not showing the right results. — Subhankar K, Jun 05 '13 at 16:08
Please help someone.I had been doing permutations and combinations for the last one week and theres no one to help me. — Subhankar K, Jun 05 '13 at 16:48
Thanks for trying to help me out Mr Lee.The browser is showing only the first image ie temp1.jpg.The fadein-fadeout of d rest of d images is not happening.Is there anything wrong in my concept. — Subhankar K, Jun 05 '13 at 17:20

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

Take out the function and it should work ok. It is only defining a function and never running it. If it did run it, all it would do is schedule the code to run when the document finishes loading.

You also want to hide all but the first picture at the start.

So it should be like:

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

Here is a fiddle showing it: http://jsfiddle.net/ePBkX/1/

I borrowed the pictures there from the fiddle attached to this, which you might want to read: jQuery fade out then fade in

edited May 23 '17 at 10:25

Community

1
1

answered Jun 05 '13 at 17:52

Lee Meador

12,829
2
36
42

Thanks a lot Mr lee.I will try it out and let you know.I am trying to call the fadingbanner() function this way but maybe something is wrong. – Subhankar K Jun 05 '13 at 17:56
You might want to remove the `$(document).ready()` then since you start 16 seconds after the banner loads. – Lee Meador Jun 05 '13 at 17:58
You are right.It seems I have got to brush up my basics first.I really appreciate your help.Learning a language all by yourself can be a difficult task. – Subhankar K Jun 05 '13 at 18:03

having trouble running a fadein-fadeout Image banner

1 Answers1