dcsimg
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,115
    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,595
    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.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

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