автоматический переключатель ярлыков jQuery

Question

Я видел много переключателей css, которые помещают кнопку, позволяющую пользователю изменять стили в соответствии с их вкусом. Я ищу аналогичное решение, которое я еще не нашел.

Это ближе всего: http://net.tutsplus.com/demos/03_jQueryStyleSwitcher/demo/index.php#

Я хочу, чтобы моя страница исчезать из одной таблицы стилей к следующему каждые х секунд, так что CSS полностью меняется каждые х секунд. Я хочу сделать это в jquery для простоты и приятных переходов. Опять же, я хочу, чтобы это произошло АВТОМАТИЧЕСКИ, без щелчка любой кнопки. Кто-нибудь видит какой-нибудь код, который может это сделать?

Answer 1

Вы можете очистить код, который фактически загружает таблицу стилей и запускать ее из вызова setInterval вместо нажатия кнопки. Вам нужно будет указать URL-адрес для таблицы стилей. Это может быть сохранено в массиве javascript, и вы можете просто поворачивать элементы массива (или выбирать случайным образом) в функции, вызванной интервальным таймером. Затем вы должны увеличить индекс (размер массива мод), чтобы отобразить следующий стиль.

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

Update: Я провел некоторое время сегодня преобразование примера в плагин, который работает для меня с избранным. Код можно найти в моем блоге, http://farm-fresh-code.blogspot.com/2009/08/jquery-theme-manager-plugin.html. Вот как я, вероятно, начну использовать его. Это будет работать с theme1.css, theme2.css и т.д. То есть стили по адресам: /example.com/styles/theme1.css ...

Сценарий:

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

демо:

демонстрационный кода, используя одновременно выбрать и ссылки можно найти на http://myweb.uiowa.edu/timv/retheme-demo.