Step. 1:
<div style="-moz-user-select: none;" id="carousel"> <div id="image"> <a target="_self" href=""> <img style="display: inline;" alt="title image " class="carousel-image" src="1.jpg" width="584" height="288"></a> <a target="_self" href=""> <img style="display: none;" alt="title image " class="carousel-image" src="2.jpg" width="584" height="288"></a> <a target="_self" href=""> <img style="display: none;" alt="title image " class="carousel-image" src="3.jpg" width="584" height="288"></a> <a target="_self" href=""><img style="display: none;" alt="title image " class="carousel-image" src="4.jpg" width="584" height="288"></a> </div> <div style="opacity: 0.9;" id="banner"> </div> <div id="info"> <h2 style="display: block;" class="headline"> <a target="_self" href="">Heading One</a></h2> <p style="display: block;" class="teaser"> description will come here. description will come here . description will come here . </p> <h2 style="display: none;" class="headline"><a target="_self" href="">Heading Two</a></h2> <p style="display: none;" class="teaser"> description will come here. description will come here . description will come here . </a> </p> <h2 style="display: none;" class="headline"> <a target="_self" href="">Heading Three</a></h2> <p style="display: none;" class="teaser"> description will come here. description will come here. description will come here .</a> </p> <h2 style="display: none;" class="headline"><a target="_self" href="">Heading Three</a></h2> <p style="display: none;" class="teaser"> description will come here. description will come here. description will come here.</a> </p> <div id="nav"> <ul class="button-holder"> <li style="display: block;" class="button prev-position" id="prev"></li> </ul> <ul class="button-holder" id="buttons"> <li style="display: inline;" class="button on" id="carouselSlide1">1</li> <li style="display: inline;" class="button off" id="carouselSlide2">2</li> <li style="display: inline;" class="button off" id="carouselSlide3">3</li> <li style="display: inline;" class="button off" id="carouselSlide4">4</li> </ul> <ul class="button-holder"> <li style="display: block;" class="button next-position" id="next"></li> </ul> </div> </div> </div>
Step. 2:
var $j = jQuery;
$j(document).ready(function() {
//
// extend the core jQuery with disableSelection
jQuery.fn.extend({
disableSelection : function() {
this.each(function() {
this.onselectstart = function() {
return false;
};
this.unselectable = "on";
jQuery(this).css('-moz-user-select', 'none');
});
}
});
//
// disable selection of grade by grade
$j('#carousel').disableSelection();
// initialize state
$j('#banner').animate({"opacity" : .9}, 0);
$j('#info h2, #info p, #image img,#buttons li,#next,#prev').hide();
var MINI = 1; // at least one slide must be set in the carousel
var MAXI = 8; // no more than 8 slides can be set in the carousel
var i = 1;
var images = $j('#image img');
var SETI = (images ? images.size() : 0);
var fadeTime = 2000;
var holdTime = 4000;
var swapTime = 2000;
var holdID = null;
var swapID = null;
if (SETI > MAXI) {
SETI = MAXI;
}
if (SETI < MINI) {
SETI = MINI;
}
// Run animation
// Initially, image 1 fadeIn over 2 secs
// image 1 holds for 4 secs
var fadeInSlide = function() {
$j('#image img:eq(' + (i - 1) + ')').fadeIn(fadeTime);
holdID = setTimeout(fadeOutSlide, holdTime);
}
// image 1 fadeOut over 2 secs
// blank holds for 2 secs
var fadeOutSlide = function() {
clearTimeout(holdID);
$j('#image img:eq(' + (i - 1) + ')').fadeOut(fadeTime);
swapID = setTimeout(nextSlide, swapTime);
}
// text 1 hides
// nav goes to 2
// text 2 shows
var nextSlide = function() {
clearTimeout(swapID);
if (i >= SETI) {
i = MINI;
} else {
i++;
}
setText(i);
setButtonState(i);
fadeInSlide();
}
// image 2 fadeIn over 2 secs
// Stop animation
if (SETI > MINI) {
$j('#carousel').mouseover(function() {
// Pause animation on mouseover
clearTimeout(holdID);
clearTimeout(swapID);
setImage(i);
setText(i);
setButtonState(i);
});
$j('#carousel').mouseout(function() {
// Restart animation on mouseout
holdID = setTimeout(fadeOutSlide, holdTime);
});
}
// set state
var setText = function(slideNumber) {
$j('#info h2').hide();
$j('#info h2:eq(' + (slideNumber - 1) + ')').show();
$j('#info p').hide();
$j('#info p:eq(' + (slideNumber - 1) + ')').show();
}
var setImage = function(slideNumber) {
$j('#image img').hide();
$j('#image img:eq(' + (slideNumber - 1) + ')').show();
}
var setButtonState = function(slideNumber) {
$j('#buttons li').removeClass('on');
$j('#buttons li').addClass('off');
$j('#buttons li:eq(' + (slideNumber - 1) + ')').removeClass('off');
$j('#buttons li:eq(' + (slideNumber - 1) + ')').addClass('on');
}
var showButtons = function() {
if (SETI > MINI) {
$j('#next').show();
$j('#prev').show();
$j('#buttons li:lt(' + (SETI) + ')').show();
}
}
// change button state
$j('#buttons li').click(function() {
var id = $j(this).attr('id');
i = id.replace('carouselSlide','');
$j('#buttons li').removeClass('on');
$j('#buttons li').addClass('off');
$j(this).removeClass('off');
$j(this).addClass('on');
setImage(i);
setText(i);
});
// next button
$j('#next').click(function() {
if (i >= SETI) {
i = MINI;
} else {
i++;
}
setImage(i);
setText(i);
setButtonState(i);
});
// previous button
$j('#prev').click(function() {
if (i <= MINI) {
i = SETI;
} else {
i--;
}
setImage(i);
setText(i);
setButtonState(i);
});
// start animation
if (SETI > MINI) {
showButtons();
setText(i);
setImage(i);
setButtonState(i);
holdID = setTimeout(fadeOutSlide, holdTime);
} else {
setText(i);
setImage(i);
}
});Step. 3:
ul,li
{
list-style: none;
}
#carousel,#carousel_no
{
margin: 15px 0;
moz-user-select: none;
webkit-user-select: none;
}
#carousel .headline
{
color: #06b;
font: normal 26px / 1.3 Georgia,"Times New Roman",Times,serif;
}
#carousel .text3
{
color: #333;
font: normal 12px / 1.3 Arial,Helvetica,sans-serif;
}
#carousel .link
{
color: #06b;
}
#carousel .alertdblarrow
{
color: #d61;
font: bold 15px Arial,Helvetica,sans-serif;
}
#carousel a
{
text-decoration: none;
}
#carousel,#carousel_no
{
background-color: white;
border: 6px solid #ccc;
display: block;
height: 290px;
position: relative;
width: 586px;
}
#carousel #image,#carousel_no #image_static
{
display: block;
height: 288px;
left: 1px;
position: absolute;
top: 1px;
width: 584px;
}
#image .carousel-image
{
border: none;
display: none;
left: 0;
position: absolute;
top: 0;
}
#carousel #banner
{
background-color: white;
bottom: 1px;
height: 60px;
left: 1px;
position: absolute;
width: 584px;
}
#carousel #info
{
bottom: 1px;
height: 90px;
left: 1px;
position: absolute;
width: 584px;
}
#info .headline
{
display: none;
left: 14px;
margin: 0;
padding: 0;
position: absolute;
top: 6px;
}
#info .teaser
{
top: 35px;
display: none;
left: 14px;
margin: 0;
padding: 0;
position: absolute;
}
#carousel #info #nav
{
bottom: 8px;
position: absolute;
right: 25px;
}
#nav .button-holder
{
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav .button
{
cursor: pointer;
display: inline;
}
#carousel .on
{
background-color: #d61;
border: 1px solid white;
color: white;
font: normal 12px / 1.5 Arial,Helvetica,sans-serif;
letter-spacing: 0;
padding: 1px 2px;
}
#carousel .off
{
background-color: #cbcbcb;
border: 1px solid white;
color: #333;
font: normal 12px / 1.5 Arial,Helvetica,sans-serif;
letter-spacing: 0;
padding: 1px 2px;
}
#carousel #prev
{
border-bottom: 9px solid rgba(255,255,255,0.0);
border-right: 9px solid #06b;
border-top: 9px solid rgba(255,255,255,0.0);
filter: alpha(opacity = 100);
font-size: 0;
letter-spacing: 0;
line-height: 0;
width: 0;
top:2px;
}
#carousel #next
{
border-bottom: 9px solid rgba(255,255,255,0.0);
border-left: 9px solid #06b;
border-top: 9px solid rgba(255,255,255,0.0);
filter: alpha(opacity = 100);
font-size: 0;
letter-spacing: 0;
line-height: 0;
width: 0;
top:3px;
}
#carousel .prev-position
{
left: -11px;
position: absolute;
top: 0;
}
#carousel .next-position
{
position: absolute;
right: -11px;
top: 0;
}Demo
