javascript - 当我单击最后一个进度按钮并让进度完成时， slider 不会返回到开始而是消失？

Question

我想知道是否有人可以帮忙，我有一个代码笔:-

https://codepen.io/robbiemcmullen/pen/eoQxKJ

一切正常，除了当您单击最后一个按钮时，它不会像应有的那样转换到开始或第一个按钮和 slider 。

我的代码如下，如果有人能提供帮助，那就太好了:-

//homepage slider
$(document).ready(function(){

  // set variables length / timeline / items
  // var duration = 5,
    var currentindex = Math.round(Math.random()*(3-1)+1),
    totalitems = $('.info').length,
    timeline = new TimelineMax(),
    item,
    bar,
    duration;

  function runslide() {

      item = $('[data-id='+ currentindex +']');
      bar = item.find('.bar');
      duration = parseInt(item.data('duration'));

      item.addClass('active');

      // if window is more than 768px run timer else pause (this is according to spec)
      if ($(window).width() > 769) {

        timeline.play();
        timeline
          .to(bar, 0, {left: '-100%'})
          .to(bar, duration, {left: '0%', ease: Linear.easeNone, delay: .75, onComplete: function(){
            item.addClass('fadeout');
          }})
          .to(bar, duration/10, {left: '100%', ease: Power4.easeIn, delay: .25, onComplete: function(){
            if(currentindex === totalitems){
              currentindex = 1;
            } else {
              currentindex++;
            }
            item.removeClass('active fadeout');
            timeline.clear();
            runslide();
          }});
      }
  }

  // progress bar and click slide bar
  function clickslide(e) {

    currentindex = e;
    timeline.clear();
    TweenMax.to(bar, duration/10, {left: '0%', ease: Power4.easeOut});
    TweenMax.to(bar, duration/10, {left: '100%', ease: Power4.easeIn, delay: duration/10});

    $('.photo, .info').removeClass('active fadeout');
    runslide();

  }

  $('.slider-banner')
    .on('click', '.info:not(.active, .fadeout)', function(){
      clickslide($(this).attr('data-id'));
      timeline.pause();
    })

    .on('mouseover', '.info.active:not(.fadeout)', function(){
      timeline.pause();
    })
    .on('mouseout', '.info.active:not(.fadeout)', function(){
      timeline.play();
    });


  $('.photo').each(function(){
    $(this).css({'background-image': 'url('+ $(this).attr('data-image') +')'});
  });

  // run on window load
  $(window).on('load', function(){
    runslide();
  });

});

Answer 1

$(this).attr('data-id')返回一个字符串，并且您正在 clickslide(e) 中设置当前索引函数到该值。

之后，您将使用strict equality operator在您的runslide()内函数来比较当前索引，因此它跳转到 else 条件，因为 4 !== '4' 。

在 else 条件下 currentindex++;将 '4' 转换为 4 并递增它，因此该值变为 5，并且 currentindex 变量在每个 runslide() 上不断递增打电话。

要么使用 parseInt()解析从 data 属性获取的字符串或使用 ==比较值。