how to run a image slider in a html page

<div id="slide">
	 <img src="images/new images/slide1.jpg" width="970" height="260"  alt="Slide" />
 	<img src="images/new images/slide2.jpg" width="970" height="260"  alt="Slide" />
 	<img src="images/new images/slide3.jpg" width="970" height="260"  alt="Slide" />
   	 <img src="images/new images/slide4.jpg" width="970" height="260"  alt="Slide" />
   	 
</div><!-- pic -->
		<script type="text/javascript">
		$(document).ready(function() {
			$('#slide').cycle({
				fx: 'fade', 
				speed: 1500,
				timeout: 5000
			});
		});
		</script>