Question

我正在尝试创建一种旋转木马，其工作方式是在点击下一个和上一个按钮时隐藏和显示图像。我已经将我的图像分组在一个表格中，并给了li元素一类＆＃39; li＆＃39;。我有四个图像，当我加载页面时，默认情况下第一个图像是唯一显示的图像。当我单击下一个按钮时，它会从第一个图像跳到第四个图像。之后，当我按下前一个按钮时，它将显示图像一，二和三。

如何让它按顺序显示？以下是我的代码。

https://jsfiddle.net/aj4tpu1z/

var prev = $('.prev');
var next = $('.next');

    $('.li').each(function() {
        var left = $(this).prev();
        var right = $(this).next();

        next.on('click', function(){    
            left.hide();
            right.show();
        });

        prev.on('click', function(){
            left.show();
            right.hide();
        });
    });

Answer 1

这是因为您的.next和.prev获得了四个（尽可能多的图片）点击处理程序，每个图片一个（因为您在循环中应用它） ）。所以当你点击时，所有四个都被执行，但是最后一个是第四个元素，所以这就是最后一个元素。

您需要计算点击时的下一个/上一个。因此，最好在当前图像中添加一个类，并使用它来设置样式。

var prev = $('.prev');
var next = $('.next');
var images = $('.images li');

function showImage( node ){
  node.addClass('active') // show specified node
      .siblings().removeClass('active'); // hide previously active node
}

prev.on('click', function(e){
  e.preventDefault(); // avoid scrolling to top or following the link
  
  var previousNode = images.filter('.active').prev();
  showImage(previousNode);
});
next.on('click', function(e){
  e.preventDefault(); // avoid scrolling to top or following the link
  
  var nextNode = images.filter('.active').next();
  showImage(nextNode);
});

$('.images li:first').addClass('active');

.images li{display:none;}
.images li.active{display:initial}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="prev">&#8592;</a>
<a href="#" class="next">&#8594;</a>


<div class="images">
  <ul>
    <li><img src="http://dummyimage.com/200x200?text=1" alt=""></li>
    <li><img src="http://dummyimage.com/200x200?text=2" alt=""></li>
    <li><img src="http://dummyimage.com/200x200?text=3" alt=""></li>
    <li><img src="http://dummyimage.com/200x200?text=4" alt=""></li>
  </ul>
</div>

Answer 2

您还有很多事情要做，包括next和prev点击处理程序位于.li类＆＃39; .each()循环。

这是一个工作示例（图片已被数字替换，因为他们无论如何都不会加载）：

＆＃13;

var prev = $('.prev');
var next = $('.next');
var num = 0;

$('.li').hide();
$('.li').eq(0).show();

next.on('click', function() {
  $('.li').hide();
  num++;
  if (num > 3) {
    num = 0;
  }
  $('.li').eq(num).show();
});

prev.on('click', function() {
  $('.li').hide();
  num--;
  if (num < 0) {
    num = 3;
  }
  $('.li').eq(num).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="prev">&#8592;</a>
<a href="#" class="next">&#8594;</a>


<div class="images">
  <ul>
    <li class="li">(Img 1)</li>
    <li class="li">(Img 2)</li>
    <li class="li">(Img 3)</li>
    <li class="li">(Img 4)</li>
  </ul>
</div>

＆＃13;

此示例假设您希望能够从幻灯片4转到幻灯片1，反之亦然;如果你不知道，请告诉我，我可以更改代码。

显示和隐藏类中的上一个和下一个元素

2 个答案: