jQuery automática de estilos conmutador

Question

He visto muchos conmutadores css que sitúan un botón que permite al usuario cambiar estilos para adaptarse a su gusto. Busco a una solución similar que todavía no he encontrado.

Este es el más cercano: http://net.tutsplus.com /demos/03_jQueryStyleSwitcher/demo/index.php#

Quiero que mi página a desaparecer de una hoja de estilo a la siguiente cada x segundos, por lo CSS cambia por completo cada x segundos. Quiero hacerlo en jQuery para la simplicidad y algunas transiciones agradables. Una vez más, quiero que esto suceda automáticamente, sin el clic de un botón. Alguien vio ningún código por ahí que puede hacer esto?

Answer 1

Se puede captar el código que realmente se carga la hoja de estilo y disparar desde una llamada a setInterval en lugar de un clic de botón. Que había necesidad de suministrar la dirección URL de la hoja de estilo. Esto podría ser almacenado en una matriz de javascript y simplemente podría rotar a través de los elementos de la matriz (o escoger uno al azar) en la función activada por el temporizador de intervalo. A continuación, tendría avanzar el índice (mod tamaño de la matriz) para obtener el siguiente estilo que se vea.

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

Actualizar : Me pasó algún tiempo hoy convertir el ejemplo en un plugin que funciona para mí con un selecto. Puede encontrar el código en mi blog, http : //farm-fresh-code.blogspot.com/2009/08/jquery-theme-manager-plugin.html . Así es como yo, probablemente proceder a utilizarlo. Esto funciona con theme1.css, theme2.css, etc. Es decir estilos en las direcciones URL: /example.com/styles/theme1.css, ...

Guión:

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' />

Demostración:

Una demostración del código utilizando tanto un selecto y enlaces se pueden encontrar en http: // myweb.uiowa.edu/timv/retheme-demo .