var numImages = $('.editorials1_on'）.index(）;不工作.有人请

你的代码有效，但只是把

target.first().addClass('editorials1_on');

以前

var numImages = $('.editorials1_on').index();  
var position = numImages+1;
$('#current_item').html(position);

并把

$('#current_item').html($('.editorials1_on').index()+1);

在每个导航按钮中。

整个代码：

$(document).ready(function() {
    var target = $('#custom_sliderEditorials').children('li');
    target.attr('class','custom-rslides-li');
    var total = target.length;
    $('#total_item').html(total);
    target.first().addClass('editorials1_on');
    var numImages = $('.editorials1_on').index();  
    var position = numImages+1;
    $('#current_item').html(position);

$('#next_btn').click(function(){
    if(target.last().hasClass('editorials1_on')){
        var recent_id = $('.editorials1_on').attr('id');
        target.last().removeClass('editorials1_on');
        target.first().addClass('editorials1_on')
  $('#current_item').html($('.editorials1_on').index()+1);
    } else {
        var recent_id = $('.editorials1_on').attr('id');
        $('#'+recent_id).removeClass('editorials1_on');
        $('#'+recent_id).next('li').addClass('editorials1_on');
  $('#current_item').html($('.editorials1_on').index()+1);
    }
});
$('#prev_btn').click(function(){
    if(target.first().hasClass('editorials1_on')){
        var recent_id = $('.editorials1_on').attr('id');
        target.first().removeClass('editorials1_on');
        target.last().addClass('editorials1_on');
  $('#current_item').html($('.editorials1_on').index()+1);
    } else {
        var recent_id = $('.editorials1_on').attr('id');
        $('#'+recent_id).removeClass('editorials1_on');
        $('#'+recent_id).prev('li').addClass('editorials1_on');
  $('#current_item').html($('.editorials1_on').index()+1);
    }
});
});

你的代码比它需要的要复杂得多。您可以通过使用 next() 和 prev() 来简化它，而不是跟踪当前元素的索引并使用它来查找要显示的下一个元素。试试这个：

$(document).ready(function() {
  var $li = $('#custom_sliderEditorials li').addClass('custom-rslides-li');
  $('#total_item').text($li.length);
  $('#next_btn, #prev_btn').click(function(e) {
    e.preventDefault();
    var directionNext = $(this).is('#next_btn');
    var $current = $li.filter('.editorials1_on');
    var $target = $current[directionNext ? 'next' : 'prev']();
    if (!$target.length)
      $target = $li[directionNext ? 'first' : 'last']();
    $target.addClass('editorials1_on').siblings().removeClass('editorials1_on');
    $('#current_item').text($target.index());
  });
});

ul {
  list-style: none;
}
.my-custom-class {
  width: 100px;
  height: 100px;
}
.prev-btn {
  width: 50px;
  height: 50px;
  display: block;
  float: left;
  background: #fff;
  border: 1px solid;
  position: relative;
  margin-right: 0px;
}
.next-btn {
  width: 50px;
  height: 50px;
  display: block;
  float: left;
  background: #fff;
  border: 1px solid;
  position: relative;
  margin-right: 5px !important;
}
.prev-btn:before {
  content: "";
  border-top: 1px solid;
  border-right: 1px solid;
  position: absolute;
  width: 25px;
  height: 25px;
  transform: rotate(45deg);
  top: 0;
  bottom: 0;
  left: -10px;
  right: 0;
  margin: auto;
}
.next-btn:before {
  content: "";
  border-top: 1px solid;
  border-right: 1px solid;
  position: absolute;
  width: 25px;
  height: 25px;
  transform: rotate(-135deg);
  top: 0;
  bottom: 0;
  left: 0;
  right: -10px;
  margin: auto;
}
.custom-rslides-li {
  display: block;
  float: none;
  position: absolute;
  opacity: 0;
  z-index: 1;
  transition: opacity 500ms ease-in-out;
}
.editorials1_on {
  float: left;
  position: relative;
  opacity: 1;
  z-index: 2;
  display: list-item;
  transition: opacity 500ms ease-in-out;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="custom-rslides" id="custom_sliderEditorials">
  <li id="cs0" class="editorials1_on">
    <img src="" class="my-custom-class" alt="" style="background: red" />
  </li>
  <li id="cs1">
    <img src="" class="my-custom-class" alt="" style="background: blue" />
  </li>
  <li id="cs2">
    <img src="" class="my-custom-class" alt="" style="background: orange" />
  </li>
  <li id="cs3">
    <img src="" class="my-custom-class" alt="" style="background: green" />
  </li>
  <li id="cs4">
    <img src="" class="my-custom-class" alt="" style="background: yellow" />
  </li>
  <li id="cs5">
    <img src="" class="my-custom-class" alt="" style="background: pink" />
  </li>
  <li id="cs6">
    <img src="" class="my-custom-class" alt="" style="background: gray" />
  </li>
</ul>
<div class="clearfix"></div>
<div class="lt-rt-controls">
  <span id="current_item">0</span>
  <span id="total_item">7</span>
  <div class="clearfix"></div>
  <a href="#" class="editorials_nav editorials1_nav next next-btn" id="prev_btn"></a>
  <a href="#" class="editorials_nav editorials1_nav prev prev-btn" id="next_btn"></a>
</div>