Question

首先抱歉我的英文:(

我创建了简单的滑块，它正在工作，

但是当我的滑块重复一次时，

请参阅双滑块的示例

单击下一步按钮或上一步按钮，它正常工作，但所有滑块都会更改图像，

我使用了HTML ID，

请参阅我的HTML代码：

<div class="slider_wrap">
    <div class="slider_content">
        <ul id="the_slider" class="slider_images">
            <li>
                <img src="slider_images/i5.jpg">
                <p class="caption">Slider</p>
            </li>
            <li>
                <img src="slider_images/i2.jpg">
                <p class="caption">Slider is free</p>
            </li>
            <li>
                <img src="slider_images/i3.jpg">
                <p class="caption">Slider is free</p>
            </li>
            <li>
                <img src="slider_images/i4.jpg">
                <p class="caption">Slider is free</p>
            </li>
        </ul>
        <i class="slider_next"></i>
        <i class="slider_prev"></i>
    </div>
</div>

请参阅我的jquery代码：

jQuery(window).load(function() { 

jQuery('#the_slider li:first-child').addClass('slider_moving');
jQuery('#the_slider li').addClass('animated');
var $first  =   $('#the_slider li:first-child'),
$last   =   $('#the_slider li:last-child');

$(".slider_next").click(function () {
    var $next,
    $slider_moving = $(".slider_moving");
    $next = $slider_moving.next('li').length ? $slider_moving.next('li') : $first;

    $slider_moving.removeClass("fadeInLeft fadeInRight");
    $slider_moving.removeClass("slider_moving").fadeOut(500);

    $next.addClass('fadeInRight');
    $next.addClass('slider_moving').fadeIn(500);
});

$(".slider_prev").click(function () {
    var $prev,
    $slider_moving = $(".slider_moving");
    $prev = $slider_moving.prev('li').length ? $slider_moving.prev('li') : $last;

    $slider_moving.removeClass("fadeInRight fadeInLeft");
    $slider_moving.removeClass("slider_moving").fadeOut(500);

    $prev.addClass('fadeInLeft');
    $prev.addClass('slider_moving').fadeIn(500);
});

});

Answer 1

问题是，在prev和下一次点击事件中，您使用类来选择滑块，因此，您选择了两个滑块。

您想要做的是遍历dom以找到父滑块元素，这样您将只使用特定滑块。

$nextButton = $(this);
$sliderContainer = $nextButton.closest('.perso_slider_content');

编辑：根据您的要求，您的js代码已编辑：

jQuery(window).load(function() { 
    jQuery('#the_slider li:first-child').addClass('perso_slider_moving');
    jQuery('#the_slider li').addClass('animated');

    $(".perso_slider_next").click(function () {
      var $nextButton = $(this);
      var $sliderContainer = $nextButton.closest('.perso_slider_content');
      var $first = $sliderContainer.find('li:first-child');

      var $next,
      $perso_slider_moving = $sliderContainer.find('.perso_slider_moving');
      $next = $perso_slider_moving.next('li').length ? $perso_slider_moving.next('li') : $first;

      $perso_slider_moving.removeClass("fadeInLeft fadeInRight");
      $perso_slider_moving.removeClass("perso_slider_moving").fadeOut(500);

      $next.addClass('fadeInRight');
      $next.addClass('perso_slider_moving').fadeIn(500);
    });

    $(".perso_slider_prev").click(function () {
        var $prevButton = $(this);
        var $sliderContainer = $prevButton.closest('.perso_slider_content');
        var $last = $sliderContainer.find('li:last-child');

        var $prev,
        $perso_slider_moving =  $sliderContainer.find(".perso_slider_moving");
        $prev = $perso_slider_moving.prev('li').length ? $perso_slider_moving.prev('li') : $last;

        $perso_slider_moving.removeClass("fadeInRight fadeInLeft");
        $perso_slider_moving.removeClass("perso_slider_moving").fadeOut(500);

        $prev.addClass('fadeInLeft');
        $prev.addClass('perso_slider_moving').fadeIn(500);
    });
});

我的简单滑块重复

1 个答案: