2013-05-01 2 views
0

3 개의 슬라이드 쇼를 다른 속도/시간으로 실행하려고합니다. 나는 여기에서 발견 될 수있는 바이올린을 만들었습니다 ... http://jsfiddle.net/zq7XG/ 어떻게 다르게 행동하게 만들 수 있습니까? 나는 다른 시대에 변화가 필요하다.한 페이지에 3 개의 슬라이드 쇼, jquery

미리 감사드립니다.

$(document).ready(function(){$('.slideshow').cycle({fx:'fade'});}); 




<div class="slideshow"> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200"/> 
</div> 

<div class="slideshow"> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200"/> 
</div> 

<div class="slideshow"> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200"/> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200"/> 
</div> 

답변

1

각각에 대해 호출주기마다 ID를 추가하십시오.

<div class="slideshow" id="slideshow-1">...</div> 
<div class="slideshow" id="slideshow-2">...</div> 
<div class="slideshow" id="slideshow-3">...</div> 

$(document).ready(function() { 
    $('#slideshow-1').cycle({ 
     fx: 'fade', 
     timeout: 5000, 
    }); 

    $('#slideshow-2').cycle({ 
     fx: 'fade', 
     timeout: 9000, 
    }); 

    ... 

}); 
1

코드에서 약간의 변경이있었습니다.

다음과 같이 변경해보십시오.

을하는 데 도움이

JS Fiddle Example

희망