jquery - 如何让我的多个轮播在一页上工作？

Question

我在一页上有两个轮播，但不幸的是它们相互复制。

http://jsfiddle.net/seanjacob/tB6y5/

任何帮助我指出正确方向的帮助将不胜感激。

我不想使用外部插件。谢谢。

Answer 1

您将点击事件范围更改为高

$('.c_next',carousel )

和

$('.c_prev',carousel )

小提琴

Answer 2

而不是这些行

$('.c_next')
$('.c_prev')
$('.c_anchor')

用这个

$(this).find('.c_next')
$(this).find('.c_prev')
$(this).find('.c_anchor')


$.fn.wf_carousel = function () {
    var carousel = $(this);

    if (carousel) {        

        var c_mask = $(carousel).children('.c_mask'),
        c_width = $(c_mask).outerWidth(),
        c_overflow = $(c_mask).children('.c_overflow'),
        c_slides = $(c_overflow).children('.c_slide'),
        c_count = $(c_slides).length,
        c_nav = $(carousel).children('.c_nav');

        $(c_overflow).children('.c_slide:nth-child(1)').addClass('active');
        $(c_nav).children('.c_anchor:nth-child(1)').addClass('active');

        $(this).find('.c_next').click(function (event) {
            c_current();

            if (c_position == c_count) { c_position = 0; }

            c_update(c_position + 1);

            $(c_overflow).stop(true, false).animate({ left: '-' + (c_position) * c_width + 'px' }, 'slow');
        });

         $(this).find('.c_prev').click(function (event) {
            c_current();

            if (c_position == 1) { c_position = c_count + 1; }

            c_update(c_position - 1);

            $(c_overflow).stop(true, false).animate({ left: '-' + (c_position - 2) * c_width + 'px' }, 'slow');
        });

        $(this).find('.c_anchor').click(function (event) {
            c_current()

            c_position = $(this).index();

            c_update(c_position + 1);

            $(c_overflow).stop(true, false).animate({ left: '-' + (c_position) * c_width + 'px' }, 'slow');

        });

    }

    function c_current() {
        c_active = $(c_overflow).children('.c_slide.active');
        c_activeAnchor = $(c_nav).children('.c_anchor.active');
        c_position = $(c_active).index();
        c_position = c_position + 1;
    }

    function c_update(c_position) {
        $(c_active).removeClass('active');
        $(c_activeAnchor).removeClass('active');
        $(c_overflow).children('.c_slide:nth-child(' + c_position + ')').addClass('active');
        $(c_nav).children('.c_anchor:nth-child(' + c_position + ')').addClass('active');
    }
};


$('#c_main').wf_carousel();
$('#c_second').wf_carousel();
​

Answer 3

问题是，即使有人点击另一个轮播，您的点击事件也会被执行。

检查这个更新的小提琴：

http://jsfiddle.net/tB6y5/3/

我变了

$('.c_next').click(...)

到

carousel.find('.c_next').click(...)

与其他点击事件相同。

Answer 4

两个轮播中的所有元素都具有相同的类。您的脚本仅通过查看它们的类来选择元素，并且由于两个轮播共享相同的类，因此它将在两个轮播中执行您的脚本。有很多方法可以解决这个问题。您可以向包含“链接”的 's添加一个data-...属性：div

<div class="c_nav">
    <div class="c_anchor" data-target="c_main">1</div>
    <div class="c_anchor" data-target="c_main">2</div>
    <div class="c_anchor" data-target="c_main">3</div>
    <div class="c_anchor" data-target="c_main">4</div>
</div>
<div class="c_next" data-target="c_main">next</div>
<div class="c_prev" data-target="c_main">prev</div>

然后您可以使用自己的脚本并对其进行编辑以针对以下内容：

var carTarget = '#' + $(this).attr('data-target');

//let your functions apply to $(carTarget).animate( etc.

Answer 5

如果您已经在变量中定义了 $(element)，则不需要一遍又一遍地使用它。这是多余的。

工作和净化演示

并使用：

carousel.on('click','.your_class', function (event) {

你的代码：

/**
* @author Sean Jacob
* @extends jquery
*/

$.fn.wf_carousel = function () {
    var carousel = $(this);

    if (carousel) {        

        var c_mask = carousel.children('.c_mask'),
        c_width = c_mask.outerWidth(),
        c_overflow = c_mask.children('.c_overflow'),
        c_slides = c_overflow.find('.c_slide'),
        c_count = c_slides.length,
        c_nav = carousel.children('.c_nav');

        c_overflow.children('.c_slide:nth-child(1)').addClass('active');
        c_nav.children('.c_anchor:nth-child(1)').addClass('active');

        carousel.on('click','.c_next', function (event) {
            c_current();

            if (c_position == c_count) { c_position = 0; }

            c_update(c_position + 1);

            c_overflow.stop(true, false).animate({ left: '-' + (c_position) * c_width + 'px' }, 'slow');
        });

        carousel.on('click','.c_prev', function (event) {
            c_current();

            if (c_position == 1) { c_position = c_count + 1; }

            c_update(c_position - 1);

            c_overflow.stop(true, false).animate({ left: '-' + (c_position - 2) * c_width + 'px' }, 'slow');
        });

        carousel.on('click','.c_anchor', function (event) {
            c_current()

            c_position = $(this).index();

            c_update(c_position + 1);

            c_overflow.stop(true, false).animate({ left: '-' + (c_position) * c_width + 'px' }, 'slow');

        });

    }

    function c_current() {
        c_active = c_overflow.children('.c_slide.active');
        c_activeAnchor = c_nav.children('.c_anchor.active');
        c_position = c_active.index();
        c_position = c_position + 1;
    }

    function c_update(c_position) {
        c_active.removeClass('active');
        c_activeAnchor.removeClass('active');
        c_overflow.children('.c_slide:nth-child(' + c_position + ')').addClass('active');
        c_nav.children('.c_anchor:nth-child(' + c_position + ')').addClass('active');
    }
};


$('#c_main').wf_carousel();
$('#c_second').wf_carousel();