Question

我有3个图像要显示，图像在li里面，我把值放在每个li上，li的值对应窗口的宽度。例如，如果我得到li索引0的第一个值，第一个图像将显示..etc。这是我的代码

<div class="sliderContainer">
  <ul class="slides">
    <li class="slide" value="0">img</li>
    <li class="slide" value="1366">img</li>
    <li class="slide" value="2732">img</li>
  </ul>

  <a class="next"><img src="images/sliderArrowleft.png" /></a>
  <a class="prev"><img src="images/sliderArrowright.png" /></a>  
</div>

如果我点击.next btn，它必须得到li值1366然后如果我点击.next btn再次它将得到2732并再次从0,1366,2732循环再次循环......请帮助我...

Answer 1

我想这就是你要找的东西：

$(document).ready(function() {
  var values = [],
    index = 0,
    items = $('.slide').length;

  $(".slide").each(function(index) {
    values.push($(this).val());
  });

  $('.prev').click(function() {
    var tmp = index--;
    if (tmp <= 0) index = items;
    console.log('Switch to slide n°' + index);
  });

  $('.next').click(function() {
    var tmp = index++;
    if (tmp >= items) index = 0;
    console.log('Switch to slide n°' + index);
  });

});

什么很酷：无论您拥有多少张幻灯片，它都能正常运作！

这是一个小提琴：https://jsfiddle.net/o2gxgz9r/4405/

我的方式有点冗长，并没有像Mehul Mohan那样使用prev()和next()，但这很容易理解。

Answer 2

var currentLI = $('.slides li:first-child');
$('a.next').click(function() {
  currentLI.next();
  if(!currentLI.length) currentLI = $('.slides li:first-child');
  // use currentLI
});

$('a.prev').click(function() {
  currentLI.prev();
  if(!currentLI.length) currentLI = $('.slides li:last-child');
  // use currentLI
});

使用jQuery prev()和next()

Jquery如何通过onclick获取每个li的值

2 个答案: