Я использую плагин цикла jquery для создания слайд-шоу. У меня есть 5 фотографий, которые скользят, но одновременно отображаются только 3 миниатюры страниц. Я хотел, чтобы при переходе к 4-й фотографии миниатюры внизу менялись, чтобы отображались 4-я и 5-я миниатюры.
У меня есть кнопки «Далее» и «Предыдущая» на странице, при нажатии «Далее» отображаются 4-я и 5-я миниатюры, нажмите «Предыдущая», чтобы вернуться к 1-й и 3-й миниатюре. Итак, в основном, я хочу, чтобы div, содержащий миниатюру, автоматически анимировался влево, когда он скользил к 4-й фотографии, как если бы вы нажали кнопку «Далее». Но я понятия не имею, почему это не работает....
Вот скрипт, который запускает слайд и возвращает номер текущего слайда:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx: 'turnDown',
speed: 'fast',
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '#nav li:eq(' + (idx) + ') a';
} ,
after: function (curr, next, opts) {
var number = (opts.currSlide + 1);
$('#caption1').html(number);
},
});
});
</script>
Вот код, который управляет кнопками «Далее» и «Назад»
<script type="text/javascript">
$(document).ready(function() {
$('#next_control').click(function() {
var c = $('#nav_content');
var pos = c.position();
var w = c.width();
var status = w + pos.left;
var dif = w - 190;
var x = w + dif;
if (status > 190) {
c.stop().animate({
left: pos.left - 180
}, 500);
};
});
});
$(document).ready(function() {
$('#prev_control').click(function() {
var c = $('#nav_content');
var pos = c.position();
if (pos.left < 0) {
c.stop().animate({
left: pos.left + 180
}, 500)
};
});
});
Наконец, вот код, который, как я думал, будет выполнять тот же эффект, что и нажатие кнопки «Далее», когда слайд-шоу переходит к 4-й фотографии. Но почему-то не работает....
$(document).ready(function(){
if(number = 4){
$('#nav_content').stop().animate({left: pos.left - 180},500);
}
});
</script>
Любая идея..? Спасибо!!!
