开发者

Button image change on a timer

In my project I have a page which contains 5 image buttons laying horizantally. When the page loads image on the Button1 should change(remaining 4 buttons remains same). After 3 seconds Button1 comes back to its original image and image on Button2 will change. After 3 seconds Button2 comes back to its original image and image on Button3 will change. And so开发者_如何学Python on.. But After the Button5 is done , It should come back to the Button1 image again. This should go on in a continuous loop. Here is my code.But its not working I don't know the reason why its not working. any help will be appreciated.

Here is my code

$(document).ready(function (){
    BeginRotation();
});

function BeginRotation() {
    rotateButton(0);
}

function rotateButton(buttonIndex) {
  var previousIndex = (buttonIndex + 4) % 5;

  var previousCurrentClass = 'main-nav-button' + (previousIndex + 1) + '-on';
  var previousNewClass = 'main-nav-button' + (previousIndex + 1);
  var currentClass = 'main-nav-button' + (buttonIndex + 1);
  var newClass = 'main-nav-button' + (buttonIndex + 1) + '-on';

  // alert('Previous Current Class: ' + previousCurrentClass + '\nPrevious New Class: ' + previousNewClass + '\nCurrent Class: ' + currentClass + '\nNew Class: ' + newClass);

  $('.' + currentClass).removeClass(currentClass).addClass(newClass);
  $('.' + previousCurrentClass).removeClass(previousCurrentClass).addClass(previousNewClass);
  window.setTimeout(rotateButton((buttonIndex + 1) % 5), 3000);
}


One thing that is incorrect for sure

window.setTimeout(rotateButton((buttonIndex + 1) % 5), 3000);

It should be

window.setTimeout("rotateButton(" + ((buttonIndex + 1) % 5) + ")", 3000);


I didn't test this code, but something like this should work:

jQuery(function($){
    var $btns = $('a.btn');
    var index = 0;

    setInterval(function() {
        $btns.removeClass('rotateThis');
        $btns[index].addClass('rotateThis');
        index = (index + 1 >= $btns.size()) ? 0 : index + 1;
    }, 3000);
});

$('a.btn') being whatever selector works to grab your image buttons of course.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜