Question

我正在制作一个每页有X个项目的投资组合页面。每个项目都有自己的滑块。（jquery循环插件）项目条目来自数据库。

我已将控件添加到滑块（播放/暂停/下一个/上一个）

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

问题在于：例如，任何“下一个按钮”都会控制页面上的每个幻灯片。

我的方法是现在，通过php生成js代码。

但也许你们中的任何人都有更好的主意。在js-side上做。

Answer 1

问题是：例如，任何“下一个按钮”都会控制每一个幻灯片显示在页面上。

这是因为您当前的代码创建了一个事件监听器设置，其中任何'next'或'previous'按钮触发每个幻灯片放映以做出反应。您需要一种方法将每组下一个/上一个按钮与各自的幻灯片显式相关联。一种方法是为每个幻灯片按钮集生成唯一的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

动态生成的幻灯片控件

1 个答案: