时间戳

首页 > 解决方案 > 当我单击最后一个进度按钮并让进度完成时，滑块不会返回开始而是消失？

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

问题描述

我想知道是否有人可以提供帮助，我有一个 codepen：-

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

一切正常，除了当你点击最后一个按钮时，它不会像它应该做的那样转换到开始或第一个按钮和滑块。

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

//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();
  });

});

标签： javascriptjquerysass

解决方案

$(this).attr('data-id')返回一个字符串，并且您将clickslide(e)函数中的 currentindex 设置为该值。

之后，您在函数中使用严格相等运算符runslide()来比较当前索引，因此它会跳转到 else 条件，因为4 !== '4'.

在 else 条件下，currentindex++;将 '4' 转换为 4 并将其递增，因此值变为 5，并且 currentindex 变量在每次runslide()调用时保持递增。

您可以parseInt()用来解析从 data 属性获得的字符串，也可以==用来比较值。

推荐阅读