Я думаю, что пытаюсь сделать невозможное ... У меня есть стандартная карусель, использующая плагин Jcarousel:
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img id="kid1" src="images/test-kid-2-graphic.jpg" alt="test-kid-2-graphic" width="90" height="90" /><p class="caption">This is Kid 2's caption</p></li>
<li><img id="kid2" src="images/test-kid-1-graphic.jpg" alt="test-kid-1-graphic" width="90" height="90" /><p class="caption">This is Kid 1's caption</p></li>
<li><img id="kid3" src="images/test-kid-3-graphic.jpg" alt="test-kid-3-graphic" width="90" height="90" /><p class="caption">This is Kid 3's caption</p></li>
<li><img id="kid4" src="images/test-kid-1-graphic.jpg" alt="test-kid-1-graphic" width="90" height="90" /><p class="caption">This is Kid 1's caption</p></li>
<li><img id="kid5" src="images/test-kid-2-graphic.jpg" alt="test-kid-2-graphic" width="90" height="90" /><p class="caption">This is Kid 2's caption</p></li>
<li><img id="kid6" src="images/test-kid-3-graphic.jpg" alt="test-kid-3-graphic" width="90" height="90" /><p class="caption">This is Kid 3's caption</p></li>
<li><img id="kid7" src="images/test-kid-2-graphic.jpg" alt="test-kid-2-graphic" width="90" height="90" /><p class="caption">This is Kid 2's caption</p></li>
<li><img id="kid8" src="images/test-kid-1-graphic.jpg" alt="test-kid-1-graphic" width="90" height="90" /><p class="caption">This is Kid 1's caption</p></li>
<li><img id="kid9" src="images/test-kid-3-graphic.jpg" alt="test-kid-3-graphic" width="90" height="90" /><p class="caption">This is Kid 3's caption</p></li>
<li><img id="kid10" src="images/test-kid-1-graphic.jpg" alt="test-kid-1-graphic" width="90" height="90" /><p class="caption">This is Kid 1's caption</p></li>
</ul>
<div class="photo-divider"></div>
<div class="large-image-container">
<img class="large-image" src="images/test-kid-1-graphic-large.jpg" alt="photo-detail-large-vertical" />
</div>
<div class="counter-container">
<span class="item-number"></span>
of
<span class="total"></span>
</div>
<div class="caption-container">
<p></p>
</div>
<div class="carousel-button-container">
<button id="mycarousel-next">Next</button>
<button id="mycarousel-prev">Previous</button>
</div>
Она отображает 6 миниатюр, не является круговой, и прокручивает однупредмет за один раз.Первое видимое изображение (слева) всегда подсвечивается, и большое изображение также переключается при прокрутке или нажатии.То же самое для подписи, и то же самое для элемента #, на котором вы находитесь.У меня есть событие нажатия на самих миниатюрах, которое я хотел бы добиться аналогичным образом с кнопками «Вперед» и «Назад».Вот где я сейчас нахожусь в моем JS:
$(document).ready(function() {
var counter;
var total;
var last;
var itemNumZero;
var itemNum;
var toFirstZero;
var toFirst;
var imgAlt;
var imgSrc;
var capt;
function mycarousel_initCallback(carousel) {
capt = $('#mycarousel li:first-child').children('p').html();
$('.caption-container p').html(capt);
total = $('#mycarousel li').size();
$('.total').html(total);
last = total - 5;
$('#mycarousel li').click(function () {
itemLoadCallbackFunction(carousel);
itemNumZero = parseInt($(this).index());
itemNum = itemNumZero + 1;
toFirstZero = parseInt($(this).index());
toFirst = toFirstZero + 1;
if (itemNum > last) {
//scroll selected to the last possible position on click
carousel.scroll(toFirstZero);
$('#kid' + carousel.first).css('opacity', '.5');
$('#mycarousel img').css('opacity', '.5');
$(this).children('img').css('opacity', '1');
}
else {
//scroll selected to the first position position on click
carousel.scroll(toFirst);
$('#mycarousel img').css('opacity', '.5');
$('#kid' + carousel.first).css('opacity', '1');
}
//Switch the image on click
imgAlt= $(this).children('img').attr('alt');
imgSrc = "images/" + imgAlt + "-large.jpg";
$('.large-image').attr('src', imgSrc)
//Switch the caption on click
capt = $(this).children('p').html();
$('.caption-container p').html(capt);
$('.item-number').html(itemNum);
return false;
});
//Additional next & prev buttons
$('#mycarousel-next').bind('click', function () {
carousel.next();
itemLoadCallbackFunction(carousel);
return false;
});
$('#mycarousel-prev').bind('click', function () {
carousel.prev();
itemLoadCallbackFunction(carousel);
return false;
});
$('.jcarousel-next').bind('click', function () {
var last = carousel.last;
if (last == 10) {
}
else {
carousel.next();
itemLoadCallbackFunction(carousel);
return false;
}
});
$('.jcarousel-prev').bind('click', function () {
carousel.prev();
itemLoadCallbackFunction(carousel);
return false;
});
}
//This is for next & back arrows
function itemLoadCallbackFunction(carousel) {
//Take off selected state
$('#mycarousel img').css('opacity', '.5');
//Switch large image to src of first position
var firstPos = $('#kid' + carousel.first).attr('src');
$('.large-image').attr('src', firstPos.replace('graphic', 'graphic-large'));
//Add selected state to first position only
$('#kid' + carousel.first).css('opacity', '1');
//Get item number of first position on load
$('.item-number').html(carousel.first);
var total = $('#mycarousel li').size();
var last = total - 6;
var firstItem = carousel.first
// if (firstItem > last) {
// $('#mycarousel-next').hide();
// }
// else if (firstItem == 1) {
// $('#mycarousel-prev').hide();
// }
// else {
// $('#mycarousel-next').show();
// $('#mycarousel-prev').show();
// }
}
$('#mycarousel').jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
setupCallback: itemLoadCallbackFunction
});
});
Я был полностью в тупике в течение 2 дней - что я хочу сделать, это когда он закончил прокрутку, то есть 10-й пунктvisible, если пользователь нажимает кнопку Next, чтобы продолжить выделять изображения, переключать src большого изображения и обновлять элемент #, так же, как это происходит, если вы щелкаете по миниатюре или нажимаете следующую / предыдущую, пока она не достигла конца.Так же, как миниатюра навигационных изображений с большим предварительным просмотром ниже.Вы видите шесть на панели вверху, которые прокручиваются, если вы нажимаете следующую / предыдущую - если вы в конце, она все равно будет выделяться вниз по строке, пока не дойдете до последнего элемента.Я жарен - извините, если это не имеет никакого смысла.