javascript - Jquery 和 CSS3 旋转

Question

我真的可以使用一些帮助！我正在尝试使用 jquery 和 CSS3 创建旋转滚动效果。我想按顺序运行以下命令，每个命令之间有一个延迟：

Javascript：

$('#scroll-script')
.removeClass().addClass('slide-one')
DELAY
.removeClass().addClass('slide-two')
DELAY
.removeClass().addClass('slide-three')
DELAY
.removeClass().addClass('slide-four')
DELAY

HTML：

<div id="scroll-script" class="slide-one"></div>

刚开始使用 Jquery，任何帮助将不胜感激！

Answer 1

一次：

var i = 0;
delay = 1000;
var el = $('#scroll-script');
var classes = ['slide-one', 'slide-two', 'slide-three', 'slide-four'];

var interval = setInterval(function () {
  el.removeClass().addClass(classes[i]);
  i += 1;
  if (i >= classes.length) clearInterval(interval);
}, delay);

圈内：

var i = 0;
delay = 1000;
var el = $('#scroll-script');
var classes = ['slide-one', 'slide-two', 'slide-three', 'slide-four'];

var interval = setInterval(function () {
  el.removeClass().addClass(classes[i]);
  i = (i + 1) % 4;
}, delay);

Answer 2

您可以使用.animate它..这些是一些可以帮助您的链接！

http://tympanus.net/codrops/2011/04/28/rotating-image-slider/

Answer 3

//wrap in a function to provide closure on following vars
//this will prevent them from being in the global scope and
//potentially colliding with other vars
(function () {
    var sub = 0,
        delay = 500, //500 ms = 1/2 a second
        scrollScript = $('#scroll-script'),
        slides = ['one', 'two', 'three', 'four'],
        handle;

    //calls the provided anonymous function at the interval delay
    handle = setInterval(function () {
        scrollScript.removeClass().addClass('slide-' + slides[sub]);
        sub += 1;

        // test to see if there is another class in the sequence of classes
        if (!slides[sub]) {
            //if not halt timed callback
            clearInterval(handle);
        }
    }, delay);
}());

使其成为圆形：

//wrap in a function to provide closure on following vars
//this will prevent them from being in the global scope and
//potentially colliding with other vars
(function () {
    var sub = 0,
        delay = 500, //500 ms = 1/2 a second
        scrollScript = $('#scroll-script'),
        slides = ['one', 'two', 'three', 'four'],
        handle;

    //calls the provided anonymous function at the interval delay
    handle = setInterval(function () {
        scrollScript.removeClass().addClass('slide-' + slides[sub % slides.length]);
        sub += 1;
    }, delay);
}());