Я создал один настраиваемый слайдер jQuery с каруселью, ширина которой ul динамически устанавливается из li.
Я поместил один идентификатор div с #bgWrapper на тело. При нажатии карусели li эскизы я изменил фоновое изображение основного изображения, используя #bgWrapper на относительном образе li strong >. Например, li rel = "images / bgimage / bgone.jpg"
Я хочу изменить фоновое изображение основного изображения для порядка эскизов карусели. При нажатии на стрелку «Далее / Назад».
Вот мой код jQuery:
$(document).ready(function () {
//Variable Define
var thumbWrap = $("ul#carousel");
var thumb = $("ul#carousel>li");
var slider = $(".sliderCont");
var ltarrow = $(".leftArrow");
var rtarrow = $(".rightArrow");
var ulwidth = 0;
var bgImg = $("#bgWrapper");
//Remove last LI margin for set UL perfect width
$("ul#carousel>li:last-child").css("width", "200px");
//UL width from LI
thumb.each(function () {
ulwidth += $(this).width()
});
thumbWrap.width(ulwidth);
//Use same LI width value on scrollLeft:
ltarrow.click(function () {
slider.animate({
scrollLeft: "-=225px"
}, {
duration: "slow",
easing: "easeInOutQuint"
});
});
rtarrow.click(function () {
slider.animate({
scrollLeft: "+=225px"
}, {
duration: "slow",
easing: "easeInOutQuint"
});
});
//BG Image Change reflect as relation of LI
bgImg.css("background-image", "url(images/bgimage/bgone.jpg)");
thumb.click(function () {
bgImg.css("background-image", "url('" + $(this).attr('rel') + "')");
});
});
Вот ссылка на демонстрационный URL. http://jsfiddle.net/NwmLL/1/
Обновленная ссылка http://jsfiddle.net/NwmLL/2/ просто добавьте и удалите один класс .liSelect strong > на li, чтобы узнать, какой li выбран.
Я решил это, перейдите по URL-адресу http://jsfiddle.net/NwmLL/3/