Image slideshow

HTML

<link type="text/css" rel="stylesheet" href="jquery.slider.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.easing.compatibility.js"></script>
<script type="text/javascript" src="jquery.slider.js"></script>

<div id="slider1" class="slider">
	<div class="slider-box">
		<img src="1.jpg" alt="" class="slider-item" />
		<img src="2.jpg" alt="" class="slider-item" />
		<img src="3.jpg" alt="" class="slider-item" />
		<img src="4.jpg" alt="" class="slider-item" />
		<img src="5.jpg" alt="" class="slider-item" />
	</div>
	<div class="slider-control">
		<a href="#" class="slider-play"></a>
		<a href="#" class="slider-stop"></a>
	</div>		
	<div class="slider-nav">
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
	</div>
	<a href="#" class="slider-arrow slider-prev"></a>
	<a href="#" class="slider-arrow slider-next"></a>
</div>

Javascript

<script type="text/javascript">
$(function () {
	$("#slider1").slider({
		speed: 700,
		width: 600,
		height: 400,
		autoPlay: true
	});
});
</script>