单击jQuery滑块 [英] jQuery slider on click

问题描述

当您单击滑块时，我想使它起作用.我怎样才能做到这一点?这是代码: http://jsfiddle.net/EjZzs/15/

I want to make this slider do it's work when you click the slider. How can I do this? This is the code: http://jsfiddle.net/EjZzs/15/

$(function() {

//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;

//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);

var interval;

function startSlider() {
    interval = setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
            if (++currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
}
function pauseSlider() {
    clearInterval(interval);
}

$slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider);

startSlider();

});

推荐答案

将执行滑动操作的代码移至其自身的功能，然后从setInterval并单击以下命令进行调用:

Move the code that does the sliding to its own function, and call that from the setInterval and on a click:

  function startSlider() {
    interval = setInterval(slide, pause);
  }

  function slide() {
    $slideContainer.animate({
      'margin-left': '-=' + width
    }, animationSpeed, function() {
      if (++currentSlide === $slides.length) {
        currentSlide = 1;
        $slideContainer.css('margin-left', 0);
      }
    });
  }

  $slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider)
    .on('click', slide);

http://jsfiddle.net/uctr94ve/

这篇关于单击jQuery滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！