Я использую плагин цикла 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>
Есть идеи? Спасибо !!!