Speed of image rotation

Benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="flicker">
<img src="http://www.stighlorgan.com/dev/wp-content/uploads/2011/04/iss024e009526-306x280.jpg" width="306" height="280" class="active">
<img width="306" height="280" src="http://www.stighlorgan.com/dev/wp-content/uploads/2011/04/iss023e057948-306x280.jpg" />
<img width="306" height="280" src="http://www.stighlorgan.com/dev/wp-content/uploads/2011/04/iss023e0290610-306x280.jpg" />
<img width="306" height="280" src="http://www.stighlorgan.com/dev/wp-content/uploads/2011/04/IPRC_Seized_2010_11-306x280.jpg" />
<img width="306" height="280" src="http://www.stighlorgan.com/dev/wp-content/uploads/2011/04/featured-306x280.jpg" />
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Using Next
jQuery(document).ready(function() {

 var flickerImg = jQuery('#flicker img');

 jQuery('#flicker').hover(

 function() {
  flicker = setInterval(function() {
   if (flickerImg.last().hasClass('active')) {
    flickerImg.removeClass('active').first().addClass('active');
   } else {
    jQuery('#flicker img.active').removeClass('active').next().addClass('active');
   }
  }, 100);
 }, function() {
  clearInterval(flicker);
 });
});
ready
Using Selector
jQuery(document).ready(function() {
 jQuery('#flicker').hover(

 function() {
  flicker = setInterval(function() {
   if (jQuery('#flicker img.active').length > 0) {
    jQuery('#flicker img.active').removeClass('active').next('img').addClass('active');
   } else {
    jQuery('#flicker img:first-child').addClass('active');
   }
  }, 100);
 }, function() {
  clearInterval(flicker);
  jQuery('#flicker img').removeClass('active');
 });
});
ready
Combination
jQuery(document).ready(function() {

 var flickerImg = jQuery('#flicker img');

 jQuery('#flicker').hover(

 function() {
  flicker = setInterval(function() {
   if (jQuery('#flicker img.active').length > 0) {
    jQuery('#flicker img.active').removeClass('active').next().addClass('active');
   } else {
    flickerImg.removeClass('active').first().addClass('active');
   }
  }, 100);
 }, function() {
  clearInterval(flicker);
 });
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.