Please help with image rotating script

Discussion in 'JavaScript' started by JasMate, Aug 18, 2007.

0
  1. #1
    Currently the script rotates images every page refresh, however I want it to only rotate the images every 60 seconds.

    Here is the script, thanks for the help: 

    

var images = new Array();

images[0] = "images/1.jpg"; 
images[1] = "images/2.jpg"; 
images[2] = "images/3.jpg"; 
images[3] = "images/4.jpg"; 

function ShowImg() {
var number = images.length;
var increment = Math.floor(Math.random() * number);
var strTemp ='<img src="' + images[increment] + '">';
document.write(strTemp);
}

var rotate = 5000; 
var count = 0;

function RotateImg(myImage){
 myImage.src=images[count];
 count++;
 if(count==images.length){count = 0;}
 setTimeout("RotateImg(myImage)",rotate);
}
    Code (markup):
    I put this between the head tags:
    <script type="text/javascript" src="rotate.js"></script>
    Code (markup):
    And this where I want the image/s to go:

    <script language="javascript">ShowImg();</script>
    Code (markup):
     
    JasMate, Aug 18, 2007 IP
  2. nhl4000

    nhl4000 Well-Known Member

    Messages:
    479
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #2
    That's your problem. I think you should have an image tag with a name like
    And then use this to change the src
     
    nhl4000, Aug 18, 2007 IP
  3. JasMate

    JasMate Active Member

    Messages:
    2,592
    Likes Received:
    74
    Best Answers:
    0
    Trophy Points:
    90
    #3
    Thanks for your help but I don't have a clue what your talking about :p
    I don't know much about code lol, but i am trying to learn!
     
    JasMate, Aug 18, 2007 IP
  4. mjamesb

    mjamesb Member

    Messages:
    88
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #4
    What they mean is you should have an element already on the page. In this example I have an <img> tag with and id="RotateImg". So rather than doing a document.write just reference the image and change its source.

    <head>
    <title>Untitled</title>

    <script language="javascript">
    var images = new Array();

    images[0] = "images/1.jpg";
    images[1] = "images/2.jpg";
    images[2] = "images/3.jpg";
    images[3] = "images/4.jpg";

    function ShowImg() {
    var number = images.length;
    var increment = Math.floor(Math.random() * number);
    document.getElementById("RotateImg").src = images[increment];
    }

    var rotate = 5000;
    var count = 0;

    function RotateImg(myImage){
    myImage.src=images[count];
    count++;
    if(count==images.length){count = 0;}
    setTimeout("RotateImg(myImage)",rotate);
    }
    </script>

    </head>
    <body>
    <img src="1.jpg" id="RotateImg">
    </body>
    </html>
     
    mjamesb, Aug 20, 2007 IP
  5. JasMate

    JasMate Active Member

    Messages:
    2,592
    Likes Received:
    74
    Best Answers:
    0
    Trophy Points:
    90
    #5
    Thanks for helping, does that make it so the image will only rotate at the time I set, even if the page is refreshed?
     
    JasMate, Aug 20, 2007 IP
  6. mjamesb

    mjamesb Member

    Messages:
    88
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #6
    once the page is refreshed the script would reinitialize. Javascript doesn't maintain state when the page is refreshed.
     
    mjamesb, Aug 20, 2007 IP
  7. JasMate

    JasMate Active Member

    Messages:
    2,592
    Likes Received:
    74
    Best Answers:
    0
    Trophy Points:
    90
    #7
    Oh, ok. Thanks anyway. I guess it wasn't meant to be.
     
    JasMate, Aug 22, 2007 IP