javascript - jquery slider : how to separate two slider collection to act independently?

Question

我使用的是 JavaScript slider ，当它是页面上唯一的 slider 时，它工作得非常好。

但是当我有第二个 slider 时，它会对另一个 slider 的控件使用react。

我的 JavaScript:

jQuery(document).ready(function ($) {

    var slideCount = $('.slider ul li').length;
    var slideWidth = $('.slider ul li').width();
    var slideHeight = $('.slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('.slider').css({ width: slideWidth*4, height: slideHeight });

    $('.slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('.slider ul li:last-child').prependTo('.slider ul');

  function moveLeft(anchor) {
      $(anchor).parent(".slider ul").animate({
          left: +slideWidth
      }, 200, function() {
          $('.slider ul li:last-child').prependTo($(anchor).parent(".slider ul"));
          $(anchor).parent(".slider ul").css('left', '');
      });
  }

  function moveRight(anchor) {
      $(anchor).parent(".slider ul").animate({
          left: -slideWidth
      }, 200, function() {
          $('.slider ul li:first-child').appendTo($(anchor).parent(".slider ul"));
          $(anchor).parent(".slider ul").css('left', '');
      });
  }

  $('a.control-prev').click(function () {
      moveLeft($(this));
  });

  $('a.control-next').click(function () {
      moveRight($(this));
  });

});    

我的 HTML:

<h1>Slider Collection 1</h1>
<div class="slider">
  <a href="#" class="control_next">></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
    <li>SLIDE 5</li>
    <li style="background: #aaa;">SLIDE 6</li>
    <li>SLIDE 7</li>
    <li style="background: #aaa;">SLIDE 8</li>
  </ul>  
</div>

<h1>Slider Collection 2</h1>
<div class="slider">
  <a href="#" class="control_next">></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
    <li>SLIDE 5</li>
    <li style="background: #aaa;">SLIDE 6</li>
    <li>SLIDE 7</li>
    <li style="background: #aaa;">SLIDE 8</li>
  </ul>  
</div>

如何才能实现单击第一个 slider 集合的下一个/上一个链接不会对第二个 slider 集合产生影响，反之亦然？

感谢用户 Leopard，我更新了我的 javascript。但 slider 不再起作用了。我该如何修复它？

我更新了 Demo

Answer 1

您给两个 slider div 相同的 id id="slider" 因此，当您单击下一个上一个。

您可以绑定(bind)点击class并移动相应的slider。

这是一个完整的工作解决方案

HTML

<h1>Slider Collection 1</h1>
<div id="slider" class="slider">
  <a href="#" class="control_next">></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
    <li>SLIDE 5</li>
    <li style="background: #aaa;">SLIDE 6</li>
    <li>SLIDE 7</li>
    <li style="background: #aaa;">SLIDE 8</li>
  </ul>  
</div>

<h1>Slider Collection 2</h1>
<div id="Div1" class="slider">
  <a href="#" class="control_next">></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
    <li>SLIDE 5</li>
    <li style="background: #aaa;">SLIDE 6</li>
    <li>SLIDE 7</li>
    <li style="background: #aaa;">SLIDE 8</li>
  </ul>  
</div>

Javascript/Jquery

var slideCount = $('.slider ul li').length;
var slideWidth = $('.slider ul li').width();
var slideHeight = $('.slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$(function () {



    $('#slider').css({ width: slideWidth*4, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');



    $('a.control_prev').click(function () {

        moveLeft($(this));
    });

    $('a.control_next').click(function () {
        moveRight($(this));
    });

});    



function moveLeft(anchor) {

    $(anchor).parent().find("ul").animate({
        left: +slideWidth
    }, 200, function() {
        $(anchor).parent().find('ul li:last-child').prependTo($(anchor).parent().find("ul"));
        $(anchor).parent().find("ul").css('left', '');
    });
}

function moveRight(anchor) {

    $(anchor).parent().find("ul").animate({
        left: -slideWidth
    }, 200, function() {
        $(anchor).parent().find('ul li:first-child').appendTo($(anchor).parent().find("ul"));
        $(anchor).parent().find("ul").css('left', '');
    });
}