Home/ Questions/Q 1092957
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T23:45:36+00:00

I have the following code that automates a slideshow between the different slides as

  • 0

I have the following code that automates a slideshow between the different slides as shown in the picture.

This is now producing a fadeIn whenever I click on the numbers shown on the pic, but I’d like to automate the transition betweeh 1 to 5 and when on 5 return to 1 again on a timed maner.

The screenshot is:

alt text

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn(); 
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });    
});
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The following assumes you will remove the number buttons, and that your slides are numbered 1 to 5.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){
    function showSlide(integer) {
        $('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn(); 
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
        setTimeout(function() {showSlide((integer % 5) + 1);}, 5000);
    }
    showSlide(1);
});
</script>
    • 0