动态生成的幻灯片控件

我正在制作一个页面上有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

动态生成的幻灯片控件

回答

相关问题