자동 jquery 스타일 시트 스위처

Question

나는 사용자가 자신의 취향에 맞게 스타일을 변경할 수있는 버튼을 배치하는 많은 CSS 스위처를 보아왔다. 나는 아직 찾지 못한 비슷한 해결책을 찾고있다.

이

은 가장 가까운 : http://net.tutsplus.com/demos/03_jQueryStyleSwitcher/demo/index.php#

이 내 페이지를 하나의 스타일 시트에서 모든 x 초, 그래서 CSS를 완전히 매 x 초 변경 다음에 퇴색하고 싶다. 나는 jquery에서 간단하고 좋은 전환을 위해 그것을하고 싶다. 다시 말하지만, 버튼을 클릭하지 않고 자동으로이 작업을 수행하고 싶습니다. 누구도이 일을 할 수있는 코드를 보지 않습니까?

Answer 1

실제로 스타일 시트를로드하고 버튼 클릭 대신 setInterval 호출에서이를 트리거하는 코드를 제거 할 수 있습니다. 스타일 시트에 대한 URL을 제공해야합니다. 이것은 javascript 배열에 저장 될 수 있으며 간격 타이머에 의해 트리거 된 함수에서 배열의 요소를 순환하거나 단순히 무작위로 선택할 수 있습니다. 다음 스타일을 표시하려면 인덱스 (mod 배열 크기)를 올리십시오.

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

업데이트 : 저는 선택과 나를 위해 작동하는 플러그인으로 예를 변환 오늘 약간의 시간을 보냈다. 내 블로그, 코드 http://farm-fresh-code.blogspot.com/2009/08/jquery-theme-manager-plugin.html에서 찾을 수 있습니다. 다음은 아마 내가 그것을 사용하는 방법입니다. 이것은 URL을에서 스타일 등등 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에서 찾을 수 있습니다 모두를 사용하여 코드의 데모.