在 jquery 中用 document.ready() 替换 click()答案

【问题标题】：Replace click() with document.ready() in jquery在 jquery 中用 document.ready() 替换 click()
【发布时间】：2010-05-03 11:01:25
【问题描述】：

我下载了 jquery 效果示例，所有效果仅在点击时出现，但我希望它在 document.ready() 上执行并继续...

<script type="text/javascript">
 var ImgIdx = 2;//To mark which image will be select next

 function PreloadImg(){
  $.ImagePreload("images/im2.jpg");
  $.ImagePreload("images/im3.jpg");
  $.ImagePreload("images/im4.jpg");
  $.ImagePreload("images/im5.jpg");
 }
 $(document).ready(function(){
  PreloadImg();
  $(".SlashEff ul li").click(function(){
  $(".Slash").ImageSwitch({Type:$(this).attr("rel"),      NewImage:"images/im"+ImgIdx+".jpg", speed: 4000
          });
   ImgIdx++;
   if(ImgIdx>5) ImgIdx = 1;
  });  
 });
</script>

和我的

<div class="SlashEff">
 <ul>
 <li class="TryFadeIn" rel="FadeIn">Fade in</li>
  <li class="TryFlyIn"  rel="FlyIn">Fly in</li>
 <li class="TryFlyOut"  rel="FlyOut">Fly out</li>
 <li class="TryFlipIn"  rel="FlipIn">Flip in</li>
 <li class="TryFlipOut"  rel="FlipOut">Flip out</li>    
 <li class="TryScroll"  rel="ScrollIn">Scroll in</li>
 <li class="TryScroll"  rel="ScrollOut">Scroll out</li>
 <li class="TrySingleDoor" rel="SingleDoor">Single Door</li>
 <li class="TryDoubleDoor" rel="DoubleDoor">Double Door</li>
</ul>  
</div>

这里是链接http://www.hieu.co.uk/blog/index.php/imageswitch/

我试过了，

$(document).ready(function(){
  PreloadImg();
    $(".Slash").ImageSwitch({Type:$(this).attr("rel"), 
           NewImage:"images/im"+ImgIdx+".jpg", speed: 4000
          });
   ImgIdx++;
   if(ImgIdx>5) ImgIdx = 1;
 });

我试过了，但它只执行一次....我想每个5000ms 执行一次...这可能吗...

【问题讨论】：

标签： jquery effects document-ready

【解决方案1】：

可以使用setInterval来实现重复：

function swap() {
  $(".Slash").ImageSwitch({Type:$(this).attr("rel"), 
    NewImage:"images/im"+ImgIdx+".jpg", speed: 4000
  });
  ImgIdx++;
  if(ImgIdx>5) ImgIdx = 1;
}
$(document).ready(function(){
  PreloadImg();
  setInterval(swap, 5000);
});

【讨论】：

不要每次都查询$(".Slash")！
@bala3569，将变量设置为 $('.Slash') 然后在每次需要时访问该变量。
我应该使用var styl = document.getElementByClassName();

【解决方案2】：

$(document).ready(function() {
  PreloadImg();
  setTimeout(doEffect, 5000);
});

function doEffect() {
  $(".Slash").ImageSwitch({Type:$(this).attr("rel"), 
    NewImage:"images/im"+ImgIdx+".jpg", speed: 4000
  });
  ImgIdx++;
  if(ImgIdx>5) ImgIdx = 1;
}

【讨论】：

不要每次都 PreloadImg()！