我的简单滑块是重复

My simple slider is repeat

本文关键字：简单 我的      更新时间：2023-09-26

首先对不起我的英语：（

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

但当我的滑块重复两次时，

参见双滑块示例

点击下一个按钮或上一个按钮，它正在工作，但所有滑块都会更改图像，

我使用了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);
});
});

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

您想做的是遍历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);
    });
});
相关文章：