Creating an image slideshow

We use jQuery Cycle Plugin, please see here for documentation: jQuery Cycle Plugin

Accounting for Javascript disabled

If Javascript is unsupported or disabled in the web browser viewing the page, all the images will display at the same time since the style formating is comming from the plugin. So a simple solution is to use css display: none on the images displayed after the initial image.

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script type="text/javascript" src="/jquery.cycle.lite.js"></script>
    
	<script type="text/javascript">
		$(document).ready(function() {
			$('#slideshow').cycle({
				fx: 'fade',
				speed: 2500
			});
		});
	</script>

	<style type="text/css">
		#slideshow img { display: none }
		#slideshow img.first { display: block }
	</style>

</head>
<body>
	<div id="slideshow">
		<img src="image1.jpg" width="200" height="200" class="first" />
		<img src="image2.jpg" width="200" height="200" />
		<img src="image3.jpg" width="200" height="200" />
	</div>
</body>
</html>

Name:
Phone:
Email: