Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts

    JS: fading images into images

    Please help have a look at the scripts...
    Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out?
    I've wanted to make the image disappear shortly before a new image is loaded.
    I've worked on this and played around with the scripts, yet no finding...
    Please do tell me if you know the answer to it. Thanks.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script>
    window.onload = function(){
    	var pic = document.getElementById("pic");
    	document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}
    	
    	}
    
    var img = new Array();
    img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
    img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
    img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
    img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";
    
    var o = 100;
    var t;
    var p = 0;
    var f = 1;
    
    function nextImageFading(){
    	
    	t = setInterval(
    	function(){
    	
    				pic.src = img[p];
    			
    				pic.style.filter = "alpha(opacity="+o+")";
    				pic.style.MozOpacity = o/100;
    				pic.style.opacity = o/100;
    				o -= 1;
    				
    				if(o<=0){
    					
    					clearInterval(t);
    					
    					if(p<img.length-1){
    						p = p+1;
    
    						}
    					else {p=0;}
    					
    					pic.src = img[p];
    					pic.style.filter = "alpha(opacity=100)";
    					pic.style.MozOpacity = 1;
           				pic.style.opacity = 1;
    
    					o = 100;
    
    						}
    
    					},f);
    
    				}
    	
    
    </script>
    </head>
    <body>
    <img id="pic" src="" style="width:400px; height:400px;" />
    <br style="clear:both;" />
    <a id="nextImageFading_btn" href="#">NEXT</a>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script>
    window.onload = function(){
    	var pic = document.getElementById("pic");
    	document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}
    
    	}
    
    var img = new Array();
    img[0] = "http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg";
    img[1] = "http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg";
    img[2] = "http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg";
    img[3] = "http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg";
    
    // preload the images
     for (var SRC=[],z0=0;z0<img.length;z0++){
      SRC[z0]=new Image();
      SRC[z0].src=img[z0];
     }
    
    var o = 100;
    var t;
    var p = 0;
    var f = 1;
    
    function nextImageFading(){
    
    	t = setInterval(
    	function(){
    
    				pic.src = img[p];
    
    				pic.style.filter = "alpha(opacity="+o+")";
    				pic.style.MozOpacity = o/100;
    				pic.style.opacity = o/100;
    				o -= 1;
    
    				if(o<=0){
    
    					clearInterval(t);
    
    					if(p<img.length-1){
    						p = p+1;
    
    						}
    					else {p=0;}
    
    					pic.src = img[p];
    					pic.style.filter = "alpha(opacity=100)";
    					pic.style.MozOpacity = 1;
           				pic.style.opacity = 1;
    
    					o = 100;
    
    						}
    
    					},f);
    
    				}
    
    
    </script>
    </head>
    <body>
    <img id="pic" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" style="width:400px; height:400px;" />
    <br style="clear:both;" />
    <span id="nextImageFading_btn">NEXT</span>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    tinfanide (07-28-2011)

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts
    It's very helpful.
    But could I ask what of preloading images achieves the expected effect?
    I cannot see the relationship between preloading images and removing the old image and fading into the new one.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    it takes time for an image to load and the old image is visible until the new image has loaded
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this demo as a guide.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #ssImg {
                    display: none;
                }
            </style>
            <script type="text/javascript">
                var myPics = ['num1.jpg','num2.jpg','num3.jpg'];
                //preload the pics to ensure they are cached by end of page load
                var picO = new Array();
                for(i=0; i < myPics.length; i++){
                    picO[i] = new Image();
                    picO[i].src = myPics[i];
                }
                var curPic = 0;
                var fadeTimer;
                var speed = 50;
                var opacStep = 0.5;
                var dirn = -1;
                var curOpac = 10;
                function fade(){
                    if(fadeTimer){clearInterval(fadeTimer);}
                    fadeTimer = setInterval(setOpacity,speed);
                }
                function setOpacity() {
                    curOpac = curOpac + (opacStep * dirn);
                    if(curOpac < 0){
                        swapImage();
                        curOpac = 0;
                        dirn = 1;
                        fade();
                        return;
                    }
                    if(curOpac > 10){
                        curOpac = 10;
                        clearInterval(fadeTimer);
                        dirn = -1;
                        setTimeout(fade,1000);
                        return;
                    }
                    if(typeof(oSsImg.style.opacity) == 'string'){
                        oSsImg.style.opacity = curOpac/10;
                    } else {
                        oSsImg.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
                    }
                }
                function swapImage(){
                    curPic = (++curPic > picO.length-1)? 0 : curPic;
                    oSsImg.src = picO[curPic].src;
                }
                window.onload=function(){
                    oSsImg = document.getElementById('ssImg');
                    oSsImg.src = picO[curPic].src;
                    oSsImg.style.display = 'inline';
                    setTimeout(fade,1000);
                }
            </script>
        </head>
        <body>
            <div>
                <img id="ssImg" src="" alt="" />
            </div>
        </body>
    </html>

  • Users who have thanked bullant for this post:

    tinfanide (08-08-2011)

  • #6
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts
    But the old image is faded into 0 of opacity before the new image is loaded.

    Code:
    if(o<=0){
    
    					clearInterval(t);
    
    					if(p<img.length-1){
    						p = p+1;
    
    						}
    					else {p=0;}
    
    					pic.src = img[p];
    					pic.style.filter = "alpha(opacity=100)";
    					pic.style.MozOpacity = 1;
           				pic.style.opacity = 1;
    
    					o = 100;
    
    						}

  • #7
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts
    There's also a jquery fade images plugin here:

    http://medienfreunde.com/lab/innerfade/
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by tinfanide View Post
    But the old image is faded into 0 of opacity before the new image is loaded.
    Then you just need to do some Basic Debugging 101 to find and fix the problem.

    The demo I posted works fine. If you want you can easily add stop/pause and left/right buttons or onmouseover events to control the slideshow.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    Code:
    if(o<=0){
    
    					clearInterval(t);
    
    					if(p<img.length-1){
    						p = p+1;
    
    						}
    					else {p=0;}
    
    					pic.src = img[p]; // this takes time to load
    					pic.style.filter = "alpha(opacity=100)";
    					pic.style.MozOpacity = 1;
           				pic.style.opacity = 1; // the opacity is 1 before the new image has loaded
    
    					o = 100;
    
    						}
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts
    I see. Do you mean even I p++, it takes time to load the new image and if the new image is by chance not ready yet, the old image would be set to full opacity?

    Then, the question will be:
    Why is

    Code:
    if(o<=0){
    
    					clearInterval(t);
    
    					if(p<img.length-1){
    						p = p+1;
    
    						}
    					else {p=0;}
    
    					pic.src = img[p]; // this takes time to load
    					pic.style.filter = "alpha(opacity=100)";
    					pic.style.MozOpacity = 1;
           				pic.style.opacity = 1; // the opacity is 1 before the new image has loaded
    
    					o = 100;
    
    						}
    needed? Are these codes needed for the new image's opacity?
    Then, does it mean the preloading of images sync the time of loading new images and that of opacity changing?

  • #11
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS: Image Slider</title>
    <style>
    myPics {
    	display: none;
    	width: 500px;
    	height: 500px;}
    </style>
    <script>
    
    var myPics = [];
    	myPics[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png", 
    			  cap: "", 
    			  url: "", 
    			  des: ""
    			  };
    	myPics[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png", 
    			  cap: "", 
    			  url: "", 
    			  des: ""
    			  };
    	myPics[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg", 
    			  cap: "", 
    			  url: "", 
    			  des: ""
    			  };
    	myPics[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg", 
    			  cap: "", 
    			  url: "", 
    			  des: ""
    			  };
    
    
    var pic0 = new Array();
    for (i=0; i<myPics.length; i++){
    	pic0[i] = new Image();
    	pic0[i].src = myPics[i].src;
    	}
    var curPic = 0;
    
    var fadeTimer;
    var speed = 50; // speed rate for each slide
    var dirn = -1; // fade direction (*+1 = fade in; *-1 = fade out;)
    
    var opacStep = 0.5; // opacity fade rate;
    var curOpac = 10; // opacity of the current slide;
    
    function fade(){
    	if (fadeTimer){
    		clearInterval(fadeTimer);
    		}
    	fadeTimer = setInterval(setOpacity,speed);
    	}
    
    	
    
    function setOpacity(){
    	
    	curOpac = curOpac + (opacStep*dirn);
    	
    	if (curOpac<0) {
    				
    		randSwap[rand];	
    			
    		curOpac = 0;
    		dirn = 1;
    		fade();
    		return;	
    		
    		}
    
    	if (curOpac>10) {
    		curOpac = 10;
    		clearInterval(fadeTimer);
    		dirn = -1;
    		setTimeout(fade,1000);
    		return;
    		}
    
    	if (imgSlider.style.opacity=="string") {
    		imgSlider.style.opacity = curOpac/10;
    		}
    	else {imgSlider.style.filter = "alpha(opacity="+curOpac*10+")";}
    	imgSlider.style.MozOpacity = curOpac/10;
    	}
    
    function prevSwap(){
    	curPic = (--curPic < 0)? pic0.length-1 : curPic;
    	imgSlider.src = pic0[curPic].src;		
    	}
    
    function nextSwap(){
    	curPic = (++curPic > pic0.length-1)? 0 : curPic;
    	imgSlider.src = pic0[curPic].src;		
    	}
    
    window.onload = function(){
    	
    	var imgSlider = document.getElementById("imgSlider");
    	
    	var prev = prevSwap;
    	var next = nextSwap;
    	var randSwap = new Array(prev,next);
    	
    	var rand = Math.ceil(Math.random()*2)-1;
    	
    	
    	imgSlider.src = pic0[curPic].src;
    	imgSlider.style.display = "inline";
    
    	}
    
    </script>
    </head>
    <body>
    <myPics id="imgSlider" src="" />
    </body>
    </html>
    I tried to put on a random play function to the demo.
    But it just cannot work.
    Can you tell me where I've got wrong?

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS: Image Slider</title>
    <style>
    myPics {
    	display: none;
    	width: 500px;
    	height: 500px;}
    </style>
    <script>
    
    var myPics = [];
    	myPics[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png",
    			  cap: "",
    			  url: "",
    			  des: ""
    			  };
    	myPics[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png",
    			  cap: "",
    			  url: "",
    			  des: ""
    			  };
    	myPics[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg",
    			  cap: "",
    			  url: "",
    			  des: ""
    			  };
    	myPics[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg",
    			  cap: "",
    			  url: "",
    			  des: ""
    			  };
    
    
    var pic0 = new Array();
    for (i=0; i<myPics.length; i++){
    	pic0[i] = new Image();
    	pic0[i].src = myPics[i].src;
    	}
    var curPic = 0;
    
    var fadeTimer;
    var speed = 50; // speed rate for each slide
    var dirn = -1; // fade direction (*+1 = fade in; *-1 = fade out;)
    
    var opacStep = 0.5; // opacity fade rate;
    var curOpac = 10; // opacity of the current slide;
    
    function fade(){
    	if (fadeTimer){
    		clearInterval(fadeTimer);
    		}
    	fadeTimer = setInterval(setOpacity,speed);
    	}
    
    
    
    function setOpacity(){
    
    	curOpac = curOpac + (opacStep*dirn);
    
    	if (curOpac<0) {
    
            var r=curPic;
            while (r==curPic){
             curPic=Math.floor(Math.random()*(myPics.length));  // change to a random image
            }
        	imgSlider.src = pic0[curPic].src;
    		curOpac = 0;
    		dirn = 1;
    		fade();
    		return;
    
    		}
    
    	if (curOpac>10) {
    		curOpac = 10;
    		clearInterval(fadeTimer);
    		dirn = -1;
    		setTimeout(fade,1000);
    		return;
    		}
    
    	if (imgSlider.style.opacity=="string") {
    		imgSlider.style.opacity = curOpac/10;
    		}
    	else {imgSlider.style.filter = "alpha(opacity="+curOpac*10+")";}
    	imgSlider.style.MozOpacity = curOpac/10;
    	}
    
    function prevSwap(){
    	curPic = (--curPic < 0)? pic0.length-1 : curPic;
    	imgSlider.src = pic0[curPic].src;
    	}
    
    function nextSwap(){
    	curPic = (++curPic > pic0.length-1)? 0 : curPic;
    	imgSlider.src = pic0[curPic].src;
    	}
    
    var imgSlider; // this variables need to be global
    
    window.onload = function(){
    
    	imgSlider = document.getElementById("imgSlider");
    
    	imgSlider.src = pic0[curPic].src;
    	imgSlider.style.display = "inline";
         fade();
    	}
    
    </script>
    </head>
    <body>
    <img id="imgSlider" src="" />
    </body>
    </html>
    Last edited by vwphillips; 07-31-2011 at 09:45 AM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    tinfanide (07-31-2011)

  • #13
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts
    While you're answering my question, I may be working the similar way as you're just doing so.

    I finally worked out something like this:
    This produces another kind of similar effect (either prev or next image sliding) but I see yours's a shuffle one, which is what I want to think about next.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS: Image Slider</title>
    <style>
    img {
    	display: none;
    	width: 500px;
    	height: 500px;}
    </style>
    <script>
    
    window.onload = function(){
    	var imgSlider = document.getElementById("imgSlider");
    	imgSlider.src = pic0[curPic].src;
    	imgSlider.style.display = "inline";
    	setTimeout(fade,1000);
    	}
    
    var myPics = [];
    	myPics[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png", 
    			  cap: "", 
    			  url: "", 
    			  des: ""
    			  };
    	myPics[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png", 
    			  cap: "", 
    			  url: "", 
    			  des: ""
    			  };
    	myPics[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg", 
    			  cap: "", 
    			  url: "", 
    			  des: ""
    			  };
    	myPics[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg", 
    			  cap: "", 
    			  url: "", 
    			  des: ""
    			  };
    
    var pic0 = new Array();
    for (i=0; i<myPics.length; i++){
    	pic0[i] = new Image();
    	pic0[i].src = myPics[i].src;
    	}
    var curPic = 0;
    var rand = Math.ceil(Math.random()*2)-1;
    
    var fadeTimer;
    var speed = 50; // speed rate for each slide
    var dirn = -1; // fade direction (*+1 = fade in; *-1 = fade out;)
    
    var opacStep = 0.5; // opacity fade rate;
    var curOpac = 10; // opacity of the current slide;
    
    function fade(){
    	if (fadeTimer){
    		clearInterval(fadeTimer);
    		}
    	fadeTimer = setInterval(setOpacity,speed);
    	}
    
    function setOpacity(){
    	curOpac = curOpac + (opacStep*dirn);
    	
    	if (curOpac<0) {
    		
    		if(rand==0){
    			prevSwap();
    			}
    		else{nextSwap();}
    			
    		curOpac = 0;
    		dirn = 1;
    		fade();
    		return;	
    		}
    
    	if (curOpac>10) {
    		curOpac = 10;
    		clearInterval(fadeTimer);
    		dirn = -1;
    		setTimeout(fade,1000);
    		return;
    		}
    
    	if (imgSlider.style.opacity=="string") {
    		imgSlider.style.opacity = curOpac/10;
    		}
    	else {imgSlider.style.filter = "alpha(opacity="+curOpac*10+")";}
    	imgSlider.style.MozOpacity = curOpac/10;
    	}
    
    function prevSwap(){
    	curPic = (--curPic < 0)? pic0.length-1 : curPic;
    	imgSlider.src = pic0[curPic].src;		
    	}
    
    function nextSwap(){
    	curPic = (++curPic > pic0.length-1)? 0 : curPic;
    	imgSlider.src = pic0[curPic].src;		
    	}
    
    </script>
    </head>
    <body>
    <img id="imgSlider" src="" />
    </body>
    </html>

  • #14
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #ssImg {
                    display: none;
                }
            </style>
            <script type="text/javascript">
                var myPics = ['num1.jpg','num2.jpg','num3.jpg'];
                //preload the pics to ensure they are cached by end of page load
                var picO = new Array();
                for(i=0; i < myPics.length; i++){
                    picO[i] = new Image();
                    picO[i].src = myPics[i];
                }
                var curPic = 0;
                var fadeTimer;
                var speed = 50;
                var opacStep = 0.5;
                var dirn = -1;
                var curOpac = 10;
                function fade(){
                    if(fadeTimer){clearInterval(fadeTimer);}
                    fadeTimer = setInterval(setOpacity,speed);
                }
                function setOpacity() {
                    curOpac = curOpac + (opacStep * dirn);
                    if(curOpac < 0){
                        swapImage();
                        curOpac = 0;
                        dirn = 1;
                        fade();
                        return;
                    }
                    if(curOpac > 10){
                        curOpac = 10;
                        clearInterval(fadeTimer);
                        dirn = -1;
                        setTimeout(fade,1000);
                        return;
                    }
                    if(typeof(oSsImg.style.opacity) == 'string'){
                        oSsImg.style.opacity = curOpac/10;
                    } else {
                        oSsImg.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
                    }
                }
                function swapImage(){
                    curPic = (++curPic > picO.length-1)? 0 : curPic;
                    oSsImg.src = picO[curPic].src;
                }
                window.onload=function(){
                    oSsImg = document.getElementById('ssImg');
                    oSsImg.src = picO[curPic].src;
                    oSsImg.style.display = 'inline';
                    setTimeout(fade,1000);
                }
            </script>
        </head>
        <body>
            <div>
                <img id="ssImg" src="" alt="" />
            </div>
        </body>
    </html>
    I must thank for your codes again as long as I've been dragging myself in fading and sliding JS things these days. The script is helpful in the way that it is so thought-provoking.

    When I add something new based on your scripts, something occurred to my mind. If you're free, please do teach me a thing.

    The first question:
    When it reaches if (curOpac > 10)
    You reset curOpac to 10
    and the if statement is finished, is curOpac reset back to its global value 10 as in var curOpac = 10;

    Second question:
    Why return is needed?
    I am always confused by the use of "return;" in if statements.
    To the best of my knowledge, "return;" means stop the function (in this case) as it returns nothing.
    What does it mean in your script?

    Thank you.
    Last edited by tinfanide; 08-08-2011 at 05:15 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •