xeoncross/slider.html

## slider.html
<!DOCTYPE html>
<html lang="en-GB">
	<head>
		<title>iTunes slider</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/slider.js"></script>

	</head>

	<body>
    <div id="gallery">
      <img src="img/1.jpg" />
      <img src="img/2.jpg" />
      <img src="img/3.jpg" />
      <img src="img/4.jpg" />
    </div>

    <a href="#" id="next"></a>
  </div>

	</body>
</html>

## slider.js
$(document).ready(function()
{
	var index = 0;
	var images = $("#gallery img");
	var imgHeight = $(images).attr("height");
	for (i=0; i<images.length; i++)
	{
		$(images[i]).addClass("image-"+i);
	}

	$("#next").click(sift);
	show(index);
	setInterval(sift, 8000);

	function sift()
	{
		if (index<(images.length-1)){index+=1 ; }
		else {index=0}
		show (index);
	}

	function show(num)
	{
		$(images).fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
	}
});

## style.css
*{
	margin: 0;
	padding: 0;
	border: 0 none;
	outline: 0;
}

img{
	display: block;
	max-width: 600px;
  max-height: 550px;
	overflow: hidden;
}

#gallery{
	overflow: hidden;
}

#gallery img{
	position: absolute;
}

#next{
	display: block;
	width: 47px;
	height: 43px;
	background: url(img/arrow.png);
	position: absolute;
	top: 550px;
	left: 600px;
}

#next:hover{
	background: url(img/arrowmo.png);
}

.clear{
	clear: both;
}
	<!DOCTYPE html>
	<html lang="en-GB">
	<head>
	<title>iTunes slider</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/slider.js"></script>

	</head>

	<body>
	<div id="gallery">
	<img src="img/1.jpg" />
	<img src="img/2.jpg" />
	<img src="img/3.jpg" />
	<img src="img/4.jpg" />
	</div>

	<a href="#" id="next"></a>
	</div>

	</body>
	</html>
	$(document).ready(function()
	{
	var index = 0;
	var images = $("#gallery img");
	var imgHeight = $(images).attr("height");
	for (i=0; i<images.length; i++)
	{
	$(images[i]).addClass("image-"+i);
	}

	$("#next").click(sift);
	show(index);
	setInterval(sift, 8000);

	function sift()
	{
	if (index<(images.length-1)){index+=1 ; }
	else {index=0}
	show (index);
	}

	function show(num)
	{
	$(images).fadeOut(400);
	$(".image-"+num).stop().fadeIn(400);
	}
	});
	*{
	margin: 0;
	padding: 0;
	border: 0 none;
	outline: 0;
	}

	img{
	display: block;
	max-width: 600px;
	max-height: 550px;
	overflow: hidden;
	}

	#gallery{
	overflow: hidden;
	}

	#gallery img{
	position: absolute;
	}

	#next{
	display: block;
	width: 47px;
	height: 43px;
	background: url(img/arrow.png);
	position: absolute;
	top: 550px;
	left: 600px;
	}

	#next:hover{
	background: url(img/arrowmo.png);
	}

	.clear{
	clear: both;
	}