Jquery and CSS3 Rotation

Jquery and CSS3 Rotation

本文关键字：Rotation CSS3 and Jquery      更新时间：2023-09-26

我真的需要一些帮助！我正在尝试使用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，任何帮助都将不胜感激！

一次：

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

您可以使用.animate。。这些链接将帮助你！

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

//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);
}());
相关文章：