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

joanzn · 11-18-2012, 07:06 PM

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

sunfighter · 11-19-2012, 02:15 PM

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>

joanzn · 12-03-2012, 02:33 AM

Simplest is best.

Thanks for the reminder!