ساخت اسلایدری با دکمه توقف در جی کوئری

<div id="header">

<!-- jQuery handles to place the header background images -->

<div id="headerimgs">

<div id="headerimg1" class="headerimg"></div>

<div id="headerimg2" class="headerimg"></div>

</div>

<!-- Top navigation on top of the images -->

<div id="nav-outer">

<div id="navigation">

<!-- Stuff in the navigation bar goes here -->

</div>

</div>

<!-- Slideshow controls -->

<div id="headernav-outer">

<div id="headernav">

<div id="back" class="btn"></div>

<div id="control" class="btn"></div>

<div id="next" class="btn"></div>

</div>

</div>

<!-- jQuery handles for the text displayed on top of the images -->

<div id="headertxt">

<p class="caption">

<span id="firstline"></span>

<a href="#" id="secondline"></a>

</p>

<p class="pictured">

Pictured:

<a href="#" id="pictureduri"></a>

</p>

</div>

</div>

.headerimg { background-position: center top; background-repeat: no-repeat; position:absolute; }

#nav-outer { height:110px; position:relative; top:24px; background-image:url("../images/headerbg.png"); }

#firstline { background-image:url("../images/textbg.png"); float:left; display:block; }

#secondline { background-image:url("../images/textbg.png"); float:left; display:block; clear:both; }

.btn { height:32px; width:32px; float:left; cursor:pointer; }

#back { background-image:url("../images/btn_back.png"); }

#next { background-image:url("../images/btn_next.png"); }

#control { background-image:url("../images/btn_pause.png"); }

var photos = [ {

"title" : "Title 1",

"image" : "SourceImage1.jpg",

"url" : "http://www.url.1",

"firstline" : "First line 1",

"secondline" : "Second line 1"

}, {

"title" : "Title 2",

"image" : "SourceImage2.jpg",

"url" : "http://www.url.2",

"firstline" : "First line 2",

"secondline" : "Second line 2"

}

// More pictures if we want

];

var slideshowSpeed = 6000;

// Backwards navigation

$("#back").click(function() {

stopAnimation();

navigate("back");

});

// Forward navigation

$("#next").click(function() {

stopAnimation();

navigate("next");

});

var interval;

$("#control").toggle(function(){

stopAnimation();

}, function() {

// Change the background image to "pause"

$(this).css({ "background-image" : "url(images/btn_pause.png)" });

// Show the next image

navigate("next");

// Start playing the animation

interval = setInterval(function() {

navigate("next");

}, slideshowSpeed);

});

var stopAnimation = function() {

// Change the background image to "play"

$("#control").css({ "background-image" : "url(images/btn_play.png)" });

// Clear the interval

clearInterval(interval);

};

var activeContainer = 1;

var currentImg = 0;

var animating = false;

var navigate = function(direction) {

// Check if no animation is running. If it is, prevent the action

if(animating) {

return;

}

// Check which current image we need to show

if(direction == "next") {

currentImg++;

if(currentImg == photos.length + 1) {

currentImg = 1;

}

} else {

currentImg--;

if(currentImg == 0) {

currentImg = photos.length;

}

}

// Check which container we need to use

var currentContainer = activeContainer;

if(activeContainer == 1) {

activeContainer = 2;

} else {

activeContainer = 1;

}

showImage(photos[currentImg - 1], currentContainer, activeContainer);

};

در کد زیر نگاهی به متد showImage() خواهیم انداخت تا ببینیم چگونه کار می کند:

var currentZindex = -1;

var showImage = function(photoObject, currentContainer, activeContainer) {

animating = true;

// Make sure the new container is always on the background

currentZindex--;

// Set the background image of the new active container

$("#headerimg" + activeContainer).css({

"background-image" : "url(images/" + photoObject.image + ")",

"display" : "block",

"z-index" : currentZindex

});

// Hide the header text

$("#headertxt").css({"display" : "none"});

// Set the new header text

$("#firstline").html(photoObject.firstline);

$("#secondline")

.attr("href", photoObject.url)

.html(photoObject.secondline);

$("#pictureduri")

.attr("href", photoObject.url)

.html(photoObject.title);

// Fade out the current container

// and display the header text when animation is complete

$("#headerimg" + currentContainer).fadeOut(function() {

setTimeout(function() {

$("#headertxt").css({"display" : "block"});

animating = false;

}, 500);

});

};