Question

我是JQuery的新手，我有一个无限循环我的图像的旋转木马，所以我想在我的页面添加指示器，以显示我的旋转木马中有多少图像。我设法操作了一些JQuery代码，它循环遍历我的有序列表，其中包含一个名为“carousel-indicators”的类，同时删除并添加类“active”。这很好用，我点击时将JQuery脚本链接到我的“#mid_left_arrow img”和“#mid_right_arrow img”。当我到达最后一个指示器，它“循环”回到第一个指示器并添加类“活动”时反之亦然，反之亦然，当我到达第一个指示器然后它循环回到最后一个指标并添加“活跃”类。我知道这是一个非常新手的问题，所以我为此道歉...无论如何这里是我使用的JQuery：

<script type="text/javascript">
$(document).ready(function(){
         $('#mid_right_arrow img').click(function () {
   		 	var $active = $('.carousel-indicators .active');
		 	var $next = $active.next();
		 	$next.addClass('active');
		 	$active.removeClass('active');
	});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
         $('#mid_left_arrow img').click(function () {
   		 	var $active = $('.carousel-indicators .active');
		 	var $prev = $active.prev();
		 	$prev.addClass('active');
		 	$active.removeClass('active');
	});
});
</script>

这是我的有序列表的html：

<ol class="carousel-indicators">
    <li class="active">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
    <li class="">•</li>
  </ol>

Answer 1

您可以使用$(this).is(':last-child')检查所选元素是否是最后一个元素。与first-child类似。然后，您可以定义在边缘处理的方式。

您可以事先使用.next().length检查下一个元素是否是最后一个元素。当它等于0时，没有下一个元素（你已经到了最后一个元素）。

Answer 2

在这种情况下，您需要检查您是否在最后一个孩子身上，如果是，请查看列表中的第一个元素。

$(document).ready(function(){
     $('#mid_right_arrow img').click(function () {
        var $active = $('.carousel-indicators .active');
        var $next = $active.next();
        if ($next.length == 0) {
           $next = $active.siblings().first();
        }
        $next.addClass('active');
        $active.removeClass('active');
});

}）;

顺便说一下，作为样式评论，不需要在变量的前面添加美元符号。这更像是PHP的东西。

Answer 3

您可以使用以下代码循环。 DEMO here

$('#mid_left_arrow img').click(function() {
  var $active = $('.carousel-indicators .active');
  var $prev = $active.prev();

  // check if you have a valid li, otherwise select the last li
  if ($prev.length == 0) {
    $prev = $('.carousel-indicators li').last();
  }
  $prev.addClass('active');
  $active.removeClass('active');
});

$('#mid_right_arrow img').click(function() {
  var $active = $('.carousel-indicators .active');
  var $next = $active.next();

  // check if you have a valid li, otherwise select the first li
  if ($next.length == 0) {
    $next = $('.carousel-indicators li').first();
  }

  $next.addClass('active');
  $active.removeClass('active');
});

注意：您不必为每个事件编写document.ready函数。写一次＆amp;你可以在里面写下你所有的活动。

在<ol>中循环播放指针的JQuery

3 个答案: