Question

当我在互联网上探索时，我发现了这个简单的jquery滑块。

这里是html源

<div class="slider--teams">
<div class="slider--teams__team">
<ul id="list" class="cf">

  <li>
    <figure class="active">
      <div>
        <div></div>
      </div>
      <figcaption>
        <h2>Billie</h2>
        <p>Head of Team</p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <div>
        <div></div>
      </div>
      <figcaption>
        <h2>Roger</h2>
        <p>Art Director</p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <div>
        <div></div>
      </div>
      <figcaption>
        <h2>Wendy</h2>
        <p>Designer</p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <div>
        <div></div>
      </div>
      <figcaption>
        <h2>Bill</h2>
        <p>Development</p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <div>
        <div></div> 
      </div>
      <figcaption>
        <h2>Lorraine</h2>
        <p>Front-End Development</p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <div>
        <div></div> 
      </div>
      <figcaption>
        <h2>Wesley</h2>
        <p>Marketing Lead</p>
      </figcaption>
    </figure>
  </li>

</ul>

和js source

    var sliderTeam = (function(document, $) {

      'use strict';

  var $sliderTeams = $('.slider--teams'),
  $list = $('#list'),
  $listItems = $('#list li'),
  $nItems = $listItems.length,
  $nView = 3,
  autoSlider,
  $current = 0,
  $isAuto = true,
  $acAuto = 2500,

      _init = function() {
    _initWidth();
    _eventInit();
  },

      _initWidth = function() {
    $list.css({
      'margin-left': Math.floor(100 / $nView) + '%',
      'width': Math.floor(100 * ($nItems / $nView)) + '%'
    });
    $listItems.css('width', 100 / $nItems + '%');
    $sliderTeams.velocity({ opacity: 1 }, { display: "block" }, { delay:1000 });
  },

     _eventInit = function() {

        window.requestAnimFrame = (function() {
      return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(callback, element){
            window.setTimeout(callback, 1000 / 60);
          };
    })();

    window.requestInterval = function(fn, delay) {
        if( !window.requestAnimationFrame       && 
            !window.webkitRequestAnimationFrame && 
            !window.mozRequestAnimationFrame    && 
            !window.oRequestAnimationFrame      && 
            !window.msRequestAnimationFrame)
                return window.setInterval(fn, delay);
        var start = new Date().getTime(),
        handle = new Object();

        function loop() {
            var current = new Date().getTime(),
            delta = current - start;
            if(delta >= delay) {
                fn.call();
                start = new Date().getTime();
            }
            handle.value = requestAnimFrame(loop);
        };
        handle.value = requestAnimFrame(loop);
        return handle;
    }

    window.clearRequestInterval = function(handle) {
        window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
        window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value)   :
        window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
        window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
        window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
        clearInterval(handle);
    };

    $.each($listItems, function(i) {
      var $this = $(this);
      $this.on('touchstart click', function(e) {
        e.preventDefault();
        _stopMove(i);
        _moveIt($this, i);
      });
    });

    autoSlider = requestInterval(_autoMove, $acAuto);
  },

  _moveIt = function(obj, x) {

    var n = x;

    obj.find('figure').addClass('active');        
    $listItems.not(obj).find('figure').removeClass('active');

    $list.velocity({
      translateX: Math.floor((-(100 / $nItems)) * n) + '%',
      translateZ: 0
    }, {
      duration: 1000,
      easing: [400, 26],
      queue: false
    });

  },

  _autoMove = function(currentSlide) {
    if ($isAuto) { 
      $current = ~~(($current + 1) % $nItems);
    } else {
      $current = currentSlide;
    }
    console.log($current);
    _moveIt($listItems.eq($current), $current);
  },

  _stopMove = function(x) {
    clearRequestInterval(autoSlider);
    $isAuto = false;
    _autoMove(x);
  };

  return {
   init: _init
  };

})(document, jQuery);

$(window).load(function(){
  'use strict';
  sliderTeam.init();
});

它工作得很好，除了在我的网站上使用它有丝毫问题。

它自动返回到第一个li，没有我做任何事情。

当我在下一个li上疯狂地点击它时，它经常会回到第一个li，并且没有我能够看到最后一个li项目。

我猜猜js或css中发生了碰撞。

任何人都可以帮助我吗？

这是我的网站有问题。抱歉，我无法使用jsfiddle生成相同的问题。 http://lifeto.cafe24.com/xe/today#

jquery滑块返回第1个li项目问题

0 个答案: