動態生成的幻燈片控件

我正在製作一個頁面上有X個項目的組合頁面。每個項目都有自己的滑塊。（jQuery循環插件）項目條目來自數據庫。動態生成的幻燈片控件

我已經添加控件到滑塊（播放/暫停/下一首/上一個）

$('.contentimage').cycle({ 
    next: '.nextIco', 
    prev: '.prevIco' 
}); 
$('.playIco').click(function() { 
    $('.contentimage').cycle('resume'); 
}); 
$('.pauseIco').click(function() { 
    $('.contentimage').cycle('pause'); 
});

問題與此是：任何「下一個鍵」例如，控制每個頁面上的幻燈片。

我現在的做法是通過php生成js代碼。

但也許你們中的任何人都有更好的主意。在js一邊做。

來源

2013-10-11 peggel

問題是：任何'下一個按鈕'例如，控制頁面上的每個幻燈片。

這是因爲當前的代碼創建一個事件偵聽器設置在任何「下一步」或「上一個」按鈕觸發每幻燈片反應。您需要一種將每組下一個/上一個按鈕與其各自的幻燈片顯式關聯的方式。一種方法是生成每個幻燈按鈕組唯一data-屬性值，並且使用JavaScript來把兩者聯繫起來：

$('.nextIco').click(function(e) { 
    var sid = $(e.currentTarget).attr('data-slideshow-id'); 
    $('.contentimage[data-slideshow-id="' + sid + '"]').cycle('next'); 
});

然而，更好的辦法是使用其相對與它對應的按鈕，每個按鈕的幻燈片關聯在DOM樹中的位置（假設，在你的HTML，你有每個幻燈片都是由一些容器元素封裝）：

<div class="slideshow-wrapper"> 
    <div class="prevIco"></div> 
    <div class="slides-wrapper"> 
     <!-- Slideshow content/slides here ... --> 
    </div> 
    <div class="nextIco"></div> 
</div>

你的JavaScript可能看起來像以下：

$(document).ready(function() { 
    $('.prevIco .nextIco').on('click', function(e) { 
     var button = $(e.currentTarget); 
     var action = (button.hasClass('.prevIcon')) ? 'prev' : 'next'; 
     button.siblings('.slides-wrapper').cycle(action); 
    }); 
});

下面是來自Mike Alsup網站的相關演示： http://jquery.malsup.com/cycle/prevnext.html

來源

2013-10-11 04:04:57

動態生成的幻燈片控件

回答

相關問題