automatische jquery stylesheet switcher

Question

Ich habe viele css Switcher gesehen, die einen Knopf setzen, der dem Benutzer erlaubt, Stile nach ihrem Geschmack zu ändern. Ich suche nach einer ähnlichen Lösung, die ich noch nicht gefunden habe.

Dies ist in der Nähe: http://net.tutsplus.com/demos/03_jQueryStyleSwitcher/demo/index.php#

ich meine Seite von einem Stylesheet zum nächsten verblassen will css alle x Sekunden, so vollständig alle x Sekunden ändern. Ich möchte es in jQuery für die Einfachheit und einige schöne Übergänge tun. Ich möchte, dass dies AUTOMATISCH geschieht, ohne dass ein Knopf gedrückt wird. Wer kann da irgendeinen Code sehen, der das kann?

Answer 1

Sie könnten den Code, der das Stylesheet tatsächlich lädt, aufspüren und es von einem setInterval-Aufruf anstelle eines Schaltflächen-Klicks auslösen. Sie müssten die URL für das Stylesheet angeben. Dies könnte in einem Javascript-Array gespeichert werden, und Sie könnten einfach durch die Elemente des Arrays rotieren (oder eine zufällig auswählen) in der Funktion, die durch den Intervall-Timer ausgelöst wird. Sie würden dann den Index (Mod-Array-Größe) weiterleiten, um den nächsten anzuzeigenden Stil zu erhalten.

var styles = [ '/example.com/css/style1.css', '/example.com/css/style2.css' ]; 
var currentStyle = 0; 

setInterval(function() { 
     currentStyle = (currentStyle + 1) % styles.length; 
     loadStylesheet(currentStyle); 
}, 5000); 

aktualisieren: Ich habe heute einige Zeit das Beispiel in ein Plugin umgewandelt werden, die mit einer ausgewählten funktioniert für mich. Sie können den Code in meinem Blog finden, http://farm-fresh-code.blogspot.com/2009/08/jquery-theme-manager-plugin.html. So würde ich wahrscheinlich fortfahren, es zu benutzen. Dies würde die Arbeit mit theme1.css, theme2.css usw., die Stile an den Urls ist: /example.com/styles/theme1.css, ...

Drehbuch:

var currentTheme = 0; 
var themes = $('.theme'); 
themes.retheme({ 
    baseUrl: '/example.com/styles', 
    loadingImg: '/example.com/images/image.gif' 
}); 

setInterval(function() { 
    currentTheme = (currentTheme + 1) % themes.length; 
    themes.eq(currentTheme).trigger('click'); 
}); 

Html:

<input type='hidden' class='theme' value='theme1' /> 
<input type='hidden' class='theme' value='theme2' /> 
<input type='hidden' class='theme' value='theme3' /> 

Demo:

eine Demo des Codes verwenden sowohl eine Auswahl und Links finden Sie unter http://myweb.uiowa.edu/timv/retheme-demo finden.