www.webdeveloper.com
Results 1 to 3 of 3

Thread: infinite loop for slideshow

  1. #1
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265

    Exclamation infinite loop for slideshow

    I am working on a project and I need to make a fully custom solution for the slideshow -- basically I can pass in an array and I need a div with a certain ID to cycle through those background images, ideally with a short (.5 to 1 second) fade-to-color between them.

    I need some help finding the most efficient way to do this (without using an 'existing plugin' that has to be installed separately.

    The end-result will be on WordPress but there are several custom plugins going in with this functionality.

    Thank you in advance for your help; I definitely appreciate it.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,085
    one of many ways to infinitely loop an array...
    Code:
    <body>
    <p id="res"></p>
    <script type="text/javascript">
    (function (){
    var arr = ["one","two","three","four"];
    var count=0;
    function slide () {
    document.getElementById("res").innerHTML=arr[count++%arr.length];
    }
    
    setInterval(slide,1000);
    slide();
    })();
    </script>
    </body>

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    When it comes to looping an array, I prefer to do it by this method.

    HTML Code:
    <body>
    <p id="res"></p>
    <script type="text/javascript">
    
    slider = {
        arr:[],
        targetImage:document.getElementById("res"),
        slide:function(){
            if( slider.arr.length ){
            newImage = slider.arr.shift();
            slider.arr.push( newImage );
            slider.targetImage.innerHTML=newImage;
            }
        },
        addImg:function(img){
            slider.arr.push( img );
        },
        auto:setInterval("slider.slide()",1000);
    }
    // add images to the slider
    slider.addImg("one.jpg");
    slider.addImg("two.jpg");
    slider.addImg("three.jpg");
    slider.addImg("four.jpg");
    
    </script>
    </body>
    Principle here is you can add as many images as you like, expand the JSON object to include a removal of an image, it requires no array counter as it rotates the content of the array to allow a variable to hold the new image and it then gets appended to the array.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles