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