효 과 는 다음 과 같 습 니 다.setTimeout 의 용법 은 두 가지 형식 이 있 습 니 다.1 setTimeout(code,interval)의 code 는 문자열 2 setTimeout(func,interval,args)의 func 는 함수 구현 코드jquery slidpictrue $(function(){ $imageShow=$("#imageShow"); $images=$("#imageSrc li",$imageShow); $imageSwitches=$("#imageSwitch li",$imageShow); //그림 의 장 수 를 판단 합 니 다.그림 if($images.size()>0){init();/setInterval 설정 지연 시간 을 이용 하여 1 초 간격 으로 autoSwitch 함 수 를 계속 실행 합 니 다.var timer=setInterval(autoSwitch,1000);/함수$imageSwitches.each(function(index,item){$(item).click(function(){clearInterval(timer);/setTimeout 은 두 가지 형식 이 있 습 니 다.첫 번 째 setTimeout(code,interval),code 는 문자열 입 니 다.두 번 째/setTimeout(func,interval,args),func 는 함수 표현 식 입 니 다.구문 setTimeout(function(){timer=setInterval(autoSwitch,1000)},1000)이 아 닙 니 다.$imageSwitches.css('background-color','').eq(index).css('background-color','#FF3366'); //현재 data 함 수 를 사 용 했 습 니 다.그림 과 아래 표 대조 if(index!=$imageShow.data('show')){ $imageShow.data('show',index); $images.hide().eq(index).fadeIn('slow'); } }) }) } //자동 으로 표시 되 는 함수 function autoSwitch(){$nowIndex=$imageShow.data('show')+1;if($images.size()>$nowIndex){ $imageSwitches.css('background-color','').eq($nowIndex).css('background-color','#FF3366'); $imageShow.data('show',$nowIndex); $images.hide().eq($nowIndex).fadeIn('slow'); }else{ init(); } } //첫 번 째 그림 부터 function init(){$imageShow.data('show',0);$images.hide().eq(0).fadeIn('slow'); $imageSwitches.css('background-color','').eq(0).css('background-color','#FF3366'); } });
