Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts

    build image rotator but want no random

    I started my script with this idea:
    Code:
    rotateImage.setAttribute('src', banners[current]);
    This code is a mixture of my code and a PPK image rotator script. And works perfect.
    but it is a random rotator, how to do a rotator that follows the array order but without a random pick

    this code that check for a unique random pick and resets after should be without random picking,
    I asume this needs a for loop. I want to show each time the following pic out of the array in a time-based infinite loop. It should be easy but not for me.

    Code:
    while (current == old) {	
    		current = Math.floor(Math.random()*banners.length);
            }
    	old = current;
    PHP Code:
        var old 0;
        var 
    current 0;
        var 
    banners = new Array(
        
    'pix/banner_1.gif',
        
    'pix/banner_2.gif'),
    'pix/banner_3.gif');
        function 
    initRotate() {    
        if (!
    document.getElementById) return
        while (
    current == old) {    
            
    current Math.floor(Math.random()*banners.length);
            }
        
    old current;    
        
    rotateImage document.getElementById('rh');
        
    rotateImage.setAttribute('src'banners[current]);    
        
    setTimeout(initRotate,3000);
        }    
        
        
    window.onload initRotate
    Last edited by _com; 01-26-2006 at 03:15 PM.
    Information is not knowledge,Knowledge is not wisdom,Wisdom is not truth,Truth is not beauty,Beauty is not love,Love is not music and Music is THE BEST. Frank Zappa

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, one way to solve it is to have a counter you continuously increment, which you use the remainder operator on.
    Code:
    var getNext=(function(a){
        var
            l=a.length,
            i=0;
        return function(){return a[i++%l];};})(yourarray);
    Each time you call getNext you get the next item in the array. It's indifferent to what the actual item is. When it hits the end it'll go "around-the-corner" and start with the first item again.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, one way to solve it is to have a counter you continuously increment, which you use the remainder operator on.
    Code:

    var getNext=(function(a){ var l=a.length, i=0; return function(){return a[i++%l];};})(yourarray);

    Each time you call getNext you get the next item in the array. It's indifferent to what the actual item is. When it hits the end it'll go "around-the-corner" and start with the first item again.
    Thank you for replying and taking your valuable time. Is this a recursive function? Could you show me howto use this with my function? What needs to be changed and where?


    var old = 0;
    var current = 0;
    var banners = new Array(
    'pix/banner_1.gif',
    'pix/banner_2.gif'),
    'pix/banner_3.gif');
    function initRotate() {
    if (!document.getElementById) return
    while (current == old) {
    current = Math.floor(Math.random()*banners.length);
    }
    old = current;
    rotateImage = document.getElementById('rh');
    rotateImage.setAttribute('src', banners[current]);
    setTimeout(initRotate,3000);
    }

    window.onload = initRotate;
    Last edited by _com; 01-26-2006 at 03:32 PM.
    Information is not knowledge,Knowledge is not wisdom,Wisdom is not truth,Truth is not beauty,Beauty is not love,Love is not music and Music is THE BEST. Frank Zappa

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Assuming you have the array of images already defined, you insert the code after that in the source, and replace banners[current] with getNext() and you can then remove the code used for setting a value for current.



    If you on the other hand don't have the array defined, you need to delay the creation of getNext to after you have it, which you can do by the following changes:
    Code:
    // This definition can be global if you wish:
    function mkGetNext(a){var
            l=a.length,
            i=0;
        return function(){return a[i++%l];};
    }
    
    // This assignment you use wherever you need to create a new getNext function:
    var
        getNext=mkGetNext(yourarray);
    Usage is just the same for both variants.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you again. But still I dont get it as in *to implement it*. I do understand what the code you provided does.
    Could you show this with my coding example so I can see.
    I used current, old. It is really confusing. The best way for me: is to see it with my coding example.



    PHP Code:
    var banners = new Array(
    'pix/banner_1.gif',
    'pix/banner_2.gif'),
    'pix/banner_3.gif'); 

    I tried to implement this but it stopped working. Meaning there are mistakes in the code.

    a has no properties say the JS console


    var banners = new Array(
    'pix/banner_1.gif',
    'pix/banner_2.gif'),
    'pix/banner_3.gif');

    var getNext=(function(a){ /*added */
    var /*added */
    l=a.length, /*added */
    i=0; /*added */
    return function(){return a[i++%l];};})(banners); /*added */
    function initRotate() {
    if (!document.getElementById) return
    rotateImage = document.getElementById('rh');
    rotateImage.setAttribute('src', getNext);
    setTimeout(initRotate,3000);
    }

    window.onload = initRotate;
    Last edited by _com; 01-26-2006 at 04:45 PM.
    Information is not knowledge,Knowledge is not wisdom,Wisdom is not truth,Truth is not beauty,Beauty is not love,Love is not music and Music is THE BEST. Frank Zappa

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Posts
    282
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This may help?
    Code:
    <html>
    <head>
      <script>
        
        var banners = new Array(
          "pix/banner_1.gif",
          "pix/banner_2.gif", 
          "pix/banner_3.gif");
        
        function getNext(a) {
          if (typeof a.currentIndex != "number") a.currentIndex = 0;
          return a[a.currentIndex++ % a.length];
        }
            
        function initRotate() {
          if (!document.getElementById) return;
          var element = document.getElementById("rh");
          element.setAttribute("src", getNext(banners));
          setTimeout(initRotate, 1000);
        }
        
        window.onload = initRotate;
    
      </script>
    </head>
    <body>
      <img id="rh" src="pix/banner_1.gif">
    </body>
    </html>

  • #7
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Hmm, changing it quite a bit, see if this works:
    Code:
    var
        intervalRotate;
    function initRotate() {
        var
            aBanners=[
                'pix/banner_1.gif',
                'pix/banner_2.gif',
                'pix/banner_3.gif'],
            oSrc=document.getElementById('rh').getAttributeNode('src'),
            l=aBanners.length,
            i=0;
        function rotateImage(){
            oSrc.value=aBanners[i++%l];
        }
        intervalRotate=setInterval(rotateImage,3000);
    }
    window.onload=initRotate;
    Last edited by liorean; 01-26-2006 at 07:41 PM. Reason: Some cosmetic changes, and banners --> aBanners consistently.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #8
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you all for you valuable time. This worked ok.
    PHP Code:
    var banners = new Array(
          
    "pix/banner_1.gif",
          
    "pix/banner_2.gif"
          
    "pix/banner_3.gif");
        
        function 
    getNext(a) {
          if (
    typeof a.currentIndex != "number"a.currentIndex 0;
          return 
    a[a.currentIndex++ % a.length];
        }
            
        function 
    initRotate() {
          if (!
    document.getElementById) return;
          var 
    element document.getElementById("rh");
          
    element.setAttribute("src"getNext(banners));
          
    setTimeout(initRotate1000);
        }
        
        
    window.onload initRotate
    Last edited by _com; 01-26-2006 at 05:22 PM.
    Information is not knowledge,Knowledge is not wisdom,Wisdom is not truth,Truth is not beauty,Beauty is not love,Love is not music and Music is THE BEST. Frank Zappa

  • #9
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the other reworked code by liorean:

    PHP Code:
    var
        
    intervalRotate;
    function 
    initRotate() {
        var
            
    aBanners=[
                
    'pix/banner_1.gif',
                
    'pix/banner_2.gif',
                
    'pix/banner_3.gif'],
            
    oSrc=document.getElementById('rh').getAttributeNode('src'),
            
    l=banners.length,
            
    i=0;
        function 
    rotateImage(){
            
    oSrc.value=aBanners[i++%l];
        }
        if(
    typeof document.getElementById!='undefined')
            
    intervalRotate=setInterval(rotateImage,3000);
    }
    window.onload=initRotate
    should be:

    PHP Code:
      l=aBanners.length 
    and worked too!

    Thank you for the valuable lesson!

    maybe I should add the script just before the body end tag
    to make it load faster

    PHP Code:
    <script type="text/javascript">
            
    initRotate();
            
        
    </script>
    </body> 
    Last edited by _com; 01-26-2006 at 05:29 PM.
    Information is not knowledge,Knowledge is not wisdom,Wisdom is not truth,Truth is not beauty,Beauty is not love,Love is not music and Music is THE BEST. Frank Zappa

  • #10
    Regular Coder
    Join Date
    Aug 2005
    Posts
    282
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by liorean
    Hmm, changing it quite a bit, see if this works:
    Code:
    var
        intervalRotate;
    function initRotate() {
        var
            aBanners=[
                'pix/banner_1.gif',
                'pix/banner_2.gif',
                'pix/banner_3.gif'],
            oSrc=document.getElementById('rh').getAttributeNode('src'),
            l=aBanners.length,
            i=0;
        function rotateImage(){
            oSrc.value=aBanners[i++%l];
        }
        intervalRotate=setInterval(rotateImage,3000);
    }
    window.onload=initRotate;
    just as a note, getAttributeNode is not supported by IE browsers below 6.0.
    http://msdn.microsoft.com/workshop/a...ributenode.asp

  • #11
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by KC-Luck
    just as a note, getAttributeNode is not supported by IE browsers below 6.0.
    http://msdn.microsoft.com/workshop/a...ributenode.asp


    http://www.quirksmode.org/dom/w3c_core.html


    I use the KC-luck adaptation, should work in IE5.x WIN
    Information is not knowledge,Knowledge is not wisdom,Wisdom is not truth,Truth is not beauty,Beauty is not love,Love is not music and Music is THE BEST. Frank Zappa

  • #12
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I also want to set an extra different setTimeOut when iterating the array again?
    Last edited by _com; 01-26-2006 at 10:03 PM.
    Information is not knowledge,Knowledge is not wisdom,Wisdom is not truth,Truth is not beauty,Beauty is not love,Love is not music and Music is THE BEST. Frank Zappa

  • #13
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    var
        
    intervalRotate;
    function 
    initRotate() {
        var
            
    aBanners=[
                
    'pix/banner_1.gif',
                
    'pix/banner_2.gif',
                
    'pix/banner_3.gif'],
            
    oSrc=document.getElementById('rh').getAttributeNode('src'),
            
    l=banners.length,
            
    i=0;
        function 
    rotateImage(){
            
    oSrc.value=aBanners[i++%l];
        }
        if(
    typeof document.getElementById!='undefined')
            
    intervalRotate=setInterval(rotateImage,3000);
    }
    window.onload=initRotate

    Still not clear:


    Only thing that I dont seem to grasp is to add a setTimeOut that is *longer* when I restart in the array again.
    Meaning when I have reached banners[2] and restart looping from banners[0] I want to add an extra *longer* setTimeOut between 2 and 0 in the array.

    How to store a cookie from the last stored image in the array.
    Last edited by _com; 01-27-2006 at 03:39 PM.
    Information is not knowledge,Knowledge is not wisdom,Wisdom is not truth,Truth is not beauty,Beauty is not love,Love is not music and Music is THE BEST. Frank Zappa

  • #14
    Regular Coder
    Join Date
    Aug 2005
    Posts
    282
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
      <script>
        
        var banners = new Array(
          "pix/banner_1.gif",
          "pix/banner_2.gif", 
          "pix/banner_3.gif");
        banners.currentIndex = -1;
        
        function initRotate() {
          if (!document.getElementById) return;
          banners.currentIndex++;
          if (banners.currentIndex >= banners.length) banners.currentIndex = 0;
          var element = document.getElementById("rh");
          element.setAttribute("src", banners[banners.currentIndex]);
          element.setAttribute("alt", banners.currentIndex +": "+ element.getAttribute("src"));
          setTimeout(initRotate, banners.currentIndex == banners.length - 1 ? 5000 : 1000);
        }
        
        window.onload = initRotate;
    
      </script>
    </head>
    <body>
      <img id="rh" src="pix/banner_1.gif">
    </body>
    </html>
    Last edited by KC-Luck; 01-27-2006 at 06:19 PM.

  • #15
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you built in a condition to set a other timeOut

    It did not work.

    Could you see what went wrong.
    Information is not knowledge,Knowledge is not wisdom,Wisdom is not truth,Truth is not beauty,Beauty is not love,Love is not music and Music is THE BEST. Frank Zappa


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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