да, я использовал плагин Cycle на: http://malsup.com/jquery/cycle/
Я вложил каждый свой img в два и два div, чтобы обернуть вещи ...
<div id="before_window_wrapper">
<div name="before_n_after_window">
<div id="before_slide_wrapper">
<div id="before_slide">
<img src"my/image/directory/1.img"/>
</div>
<div id="slide_comment">
<h3>person comment for this img goes here</h3>
</div>
</div>
</div>
<div id="before_slide_wrapper">
<div id="before_slide">
<img src"my/image/directory/3.img"/>
</div>
<div id="slide_comment">
<h3>person comment for this img goes here</h3>
</div>
</div>
и
<div id="after_window_wrapper">
<div name="before_n_after_window">
<div id="after_slide_wrapper">
<div id="after_slide">
<img src"my/image/directory/2.img"/>
</div>
<div id="slide_comment">
<h3>person comment for this img goes here</h3>
</div>
</div>
<div id="after_slide_wrapper">
<div id="after_slide">
<img src"my/image/directory/4.img"/>
</div>
<div id="slide_comment">
<h3>person comment for this img goes here</h3>
</div>
</div>
</div>
</div>
потомки "before_n_after_window" - это циклы div:
$("#before_n_after_window").each(function(index){
$(this).cycle();
});
Оболочки слайдов (before_slide_wrapper и after_slide_wrapper) находятся под полным контролем Cycle (). Однако любой вложенной в него вещи нет, поэтому вы можете разместить больше братьев и сестер для слайдов (before_slide и after_slide) - отсюда и раздел #slide_comment.
"before_n_after_window" находится только под частичным контролем за циклом () и использует ваш код CSS, который не конфликтует с его собственным. «#before_window_wrapper» и «#after_window_wrapper» находятся под вашим полным контролем (css-wise).
Теперь, когда у вас есть "#before_n_after_window" и его дочерние элементы, просто итерируйте их, назовите и укажите элементы управления для каждой пары:
var i = index;
var current_slide = $(this);
// hides the pause button
$('#pause_button_'+i).hide();
//checks index for odd or even
i = (i%=2) ? ((index+1)/2) : ((index/2)+1);
$(current_slide).cycle({
fx: 'fade',
pager: '#nav_' + i,
prev: '#previous_button_' + i,
next: '#next_button_' + i,
});
// I want to only show the play or pause button at any given time
$(current_slide).cycle('pause');
$('#play_button_'+i).click(function(){
$(current_slide).cycle('resume', true);
$('#pause_button_'+i).show();
$('#play_button_'+i).hide();
});
$('#pause_button_'+i).click(function() {
$(current_slide).cycle('pause');
$('#pause_button_'+i).hide();
$('#play_button_'+i).show();
});
Вы должны следовать вышеизложенному соглашению об именах или любому другому, с которым вы можете принять решение. фактические элементы управления могут быть размещены где угодно, кроме как внутри окон - проблемы с ошибками.
Кстати, я установил эти пары на паузу сразу после их зацикливания, потому что я не хотел, чтобы несколько слайдов работали на странице. Я хотел, чтобы пользователь сам выбрал, какой из них будет цикл. Кроме того, я должен найти способ отключить любые другие циклы, которые могут работать. Тем не менее:
if(better_solution){
return please_post;
}