jQuery – Slideshow Example

This is another jQuery example which i want to share with you. Again, it maybe not good for use but it would be a nice example for beginners to take a quick look on jQuery. Try jQuery Cycle Plugin to get more interesting animation. If you are looking for more jQuery examples, take a look in my previous blog posts.


Here is my slideshow example.

		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
		<style type="text/css">
			body {
				text-align: center;
			.main {
				width: 500px;
				margin-left: auto;
				margin-right: auto;
			.sliding-div {
				width: 500px;
				height: 300px;
				position: absolute;
			.sliding-div-1 {
				background-color: red;
			.sliding-div-2 {
				background-color: orange;
			.sliding-div-3 {
				background-color: yellow;
			.sliding-div-4 {
				background-color: green;
			.sliding-div-5 {
				background-color: blue;
		<script type="text/javascript">
			$(document).ready(function() {
				jQuery('.sliding-div').each(function() {
				setTimeout(function(){nextSlide(1);}, 0);
			function nextSlide(index) {
				var nextIndex;
				if (index == jQuery('.sliding-div').size()) {
					nextIndex = 1;
				} else {
					nextIndex = index + 1;

				jQuery('.sliding-div-' + index).fadeOut(1000, function() {
					jQuery('.sliding-div-' + nextIndex).fadeIn(1000);

				setTimeout(function(){nextSlide(nextIndex);}, 3000);
		<div class="main">
			<div class="sliding-div sliding-div-1">		
			<div class="sliding-div sliding-div-2">		
			<div class="sliding-div sliding-div-3">		
			<div class="sliding-div sliding-div-4">		
			<div class="sliding-div sliding-div-5">		


Done =)

Reference: jQuery Cycle Plugin


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.