Question

我正在使用一个javascript滑块，当它是页面上唯一的滑块时效果非常好。

但是当我有第二个滑块时，它会对另一个滑块的控件作出反应。

我的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>

如何实现第一个滑块集合的下一个/上一个链接的点击对第二个滑块集合没有影响，反之亦然？

感谢用户Leopard我更新了我的javascript。但是滑块不再起作用了。我该如何解决？

我更新了Demo

Answer 1

您已同时为divs id滑块id="slider"，因此当您点击下一个上一个时，它会导致另一个滑块移动。

您可以绑定点击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', '');
    });
}

jquery滑块：如何将两个滑块集合分开以独立行动？

1 个答案: