web tutorial

Create a simple JQuery slideshow

Here is a simple JQuery slideshow for beginners. There is no instruction in this tutorial but I will let you download source files for you to use.

I am using the animate() function to fade images. You can try to improve this function by setting the animation speed with variable, enjoy!.

 

Slideshow JQury

View Demo

 

HTML

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title<Untitled Document</title>
<link href="slideshow-style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

</head>

<body>
<div id="content">

<div id="slideshow">
    <img src="image/dog-01.jpg" alt="" class="active" />
    <img src="image/dog-02.jpg" alt="" />
</div>

</div>
</body>
</html>

 

CSS

 

@charset "UTF-8";
#content {
	background-color: #000;
	margin: auto;
	padding: 50px;
	width: 650px;
}
#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

 

JavaScript

 

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 2000 );
});

</script>
avatar

Written by Krittiya Clark

Krittiya Clark is a creative designer who is passionate in design and code. She enjoys experimenting with techniques in both web and print. She also likes house music and snowboarding.

Comments

    avatar
    1. Kristen Fragar says:
    2. Great! Very simple and easy to use, thanks for sharing :)

    avatar
    1. web developer says:
    2. Thanks for new tips and ideas. Hope it helps.

    avatar
    1. Abitha says:
    2. Nice. You have explained the jquery slideshow in a very simple way.

    avatar
    1. kyrul says:
    2. it’s awesome tutorials .clean and nice slideshow.thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>