0

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

我已经向滑块添加了控件（播放/暂停/下一个/上一个）

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

这样做的问题是：例如，任何“下一步按钮”都控制页面上的每个幻灯片。

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

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

4

1 回答 1

0

这样做的问题是：例如，任何“下一步按钮”都控制页面上的每个幻灯片。

这是因为您当前的代码创建了一个事件侦听器设置，其中任何“下一个”或“上一个”按钮都会触发每个幻灯片做出反应。您需要一种方法来明确地将每组下一个/上一个按钮与其各自的幻灯片相关联。一种方法是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-11T04:04:57.810 回答