Question

I downloaded jquery effects example and all effects are appearing only onclick but i want it to be executed on document.ready() and continue…

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

and my

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

Here is the link http://www.hieu.co.uk/blog/index.php/imageswitch/

I tried this,

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

I tried this but it gets executed only once…. I want to execute this every 5000ms… Is this possible…

Answer 1

You can use setInterval to achieve the repeat:

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