Newbie jQuery question: Need slideshow to rotate automatically, not just when clicking navigation.

Posted by Justin on Stack Overflow See other posts from Stack Overflow or by Justin
Published on 2010-05-17T16:59:34Z Indexed on 2010/05/17 17:00 UTC
Read the original article Hit count: 190

Filed under:

Hi everyone,

This is my first post, so please forgive me if this question has been asked a million times. I'm a self professed jQuery hack and I need a little guidance on taking this script I found and adapting it to my needs.

Anyway, what I'm making is an image slide show with navigation. The script I found does this, but does not automatically cycle through the images. I'm using jQuery 1.3.2 and would rather stick with that than using the newer library. I would also prefer to edit what is already here rather than start from scratch.

Anywho, here's the html:

            <div id="myslide">
            <div class="cover">
                <div class="mystuff">
                    <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/current_Denver-skyline.jpg" />
                </div>
                <div class="mystuff">
                    <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/pepsi_center-IS42RF-0D111C.jpg" />
                </div>
                <div class="mystuff">
                    <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/columbine-2689820469_D1104.jpg" />         
                </div>
                <div class="mystuff">
                    <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/ist2_10460354-RedRocks.jpg" />         
                </div>

            </div> <!-- end of div cover -->
        </div>  <!-- end of div myslide -->

And here's the jQuery:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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:-820*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div #mystuff (here 820) ------ */
            $('#button a').each(function(){
            $(this).removeClass('active');
                if($(this).hasClass('button'+integer)){
                    $(this).addClass('active')}
            });
        }); 
    });
    </script>

Here's where I got the script: http://www.webdeveloperjuice.com/2010/04/07/create-lightweight-jquery-fade-manual-slideshow/

Again, if this question is too basic for this site please let me know and possibly provide a reference link or two. Thanks a ton!

© Stack Overflow or respective owner

Related posts about jquery1.3.2