Слайдер изображения jQuery - добавить простую функциональность управления миниатюром ⇐ Jquery

[Anonymous]

Я использую Marco 'Founal Image Slider' на своем сайте. Ссылка на фоновый слайдер демонстрируется ниже. Слайдер они выбрали. Что -то подобное < /code>, и, как вы можете себе представить, второе «o 'приведет вас ко второму изображению и т. Д./*
* Author: Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 6000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
"title" : "",
"image" : "image_1.jpg",
"url" : "",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "image_2.jpg",
"url" : "",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "image_3.jpg",
"url" : "",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "image_4.jpg",
"url" : "",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "image_5.jpg",
"url" : "",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "image_6.jpg",
"url" : "",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "image_7.jpg",
"url" : "",
"firstline" : "",
"secondline" : ""
}
];

$(document).ready(function() {

// 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(img/btn_pause.png)" });

// Show the next image
navigate("next");

// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});

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);

};

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(img/" + 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);
});
};

var stopAnimation = function() {
// Change the background image to "play"
$("#control").css({ "background-image" : "url(img/btn_play.png)" });

// Clear the interval
clearInterval(interval);
};

// We should statically set the first image
navigate("next");

// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);

});
< /code>

и копия кода стрельбы в моем файле script.js < /p>

//index page image preloading code
var imgArr = new Array( // relative paths of images
'img/image_1.jpg',
'img/image_2.jpg',
'img/image_3.jpg',
'img/image_4.jpg',
'img/image_5.jpg',
'img/image_6.jpg',
'img/image_7.jpg'
);

var preloadArr = new Array();
var i;

/* preload images */
for(i=0; i < imgArr.length; i++){
preloadArr = new Image();
preloadArr.src = imgArr;
}


Подробнее здесь: https://stackoverflow.com/questions/120 ... ctionality