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 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts

    using jQuery setInterval on 3 images going up and down the DOM

    I'm trying to have 3 images cycle for a convertible car. I am trying to use setInterval to start with the 1st image(top-down) and go through to the 2nd (top-going-up) to the 3rd(top-up) then back to the 2nd then back to the 1st. so the sequence is 1,2,3,2,1,2,3,2,1 continuously. the html is simple enough:

    Code:
    <div class="car">
    			<img src="img/1.jpg">
    			<img src="img/2.jpg">
    			<img src="img/3.jpg">
    		</div>
    the script is:
    Code:
    var count = 1,
    					maxIndex = 2;
    										
    				 setInterval(function(){
    					// check if last vehicle image is visible
    					if (count == 0) {
    						$('.car').children('img').eq(maxIndex).fadeTo(1500, 0, function() { $(this).hide(); });
    					}			
    					else {
    					
    						$('.car').children('img').eq(count)
    							.fadeTo(0, 0)
    							.show()
    							.fadeTo(1500, 1, function() {
    								if (count > 1) {
    									$('.car').children('img').eq(count-1).fadeTo(0, 0).hide();
    								}
    							});  
    					}
    					count = (count >= maxIndex) ? 0 : count+1;
    				}, 3000);
    I've kinda been stuck on this for a couple days now and I thought this would be simple! Any help is much appreciated. If I find a solution I'll be sure to post it in here for anyone in the future
    Last edited by joanzn; 11-19-2012 at 02:21 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,450
    Thanks
    23
    Thanked 631 Times in 630 Posts
    You add your fades. This is to display the images
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>New document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var count = 1,
    var int=self.setInterval(function(){show()},3000);
    
    function show()
    {
    
    	if(count == 1){
    		$("#two").css("display", "none");
    		$("#three").css("display", "none");
    		$("#one").css("display", "block");
    
    	}else if(count == 2 || count == 4){
    		$("#one").css("display", "none");
    		$("#three").css("display", "none");
    		$("#two").css("display", "block");
    	}else if(count == 3){
    		$("#one").css("display", "none");
    		$("#two").css("display", "none");
    		$("#three").css("display", "block");
    	}
    	count++;
    	if(count == 5) count = 1;
    }
    </script>
    <style type="text/css">
    #one, #two, #three{
    	display:none;
    }
    </style>
    </head>
    
    <body>
    
    <div class="car">
    	<img id="one" src="img/1.jpg">
    	<img id="two" src="img/2.jpg">
    	<img id="three" src="img/3.jpg">
    </div>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    joanzn (12-03-2012)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    Simplest is best. Thanks for the reminder!


  •  

    Tags for this Thread

    Posting Permissions

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