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.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Image Rotation with timer

    Would really appreciate any help with my request....


    Im looking to setup a project for my uni assignment. its going to be a time radio site and i'm looking to create a page that has some javascript to carry out an image rotation.

    I want to have:
    - three images side by side
    - all images to rotate from a folder containing 100+ pictures
    - they all have different file names and extensions but i can change them if need be
    - i want the images to rotate automatically without the page having to be reloaded or mouseovers or anything
    - i would like them to rotate on different time frames i.e. first picture 3 sec rotation, second picture 5 seconds, third image 7 seconds.... something like that


    if any can help me with this i would be really grateful...

    iv tried scanning the web but come up short. cant use php or anything its got to be a html page using javascript.

    just to point out im not cheating by the way the module im doing it for is for media design not programming just cant find the code to do what i want.

    again thanks for everyones time

    cheers

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    See Forum Rule 1.5) No homework assignments - Do not post your entire homework assignment and request that other members do it for you. This is considered cheating, and your thread may even be used by your school to prove your guilt. Now, you may ask for advice or help on a specific aspect of your assignment that you're having trouble with. Use common sense as far as what's acceptable in terms of soliciting help with homework assignments.

    It is still cheating to get others to do your work for you, regardless of the course.

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As i explained my assignment is on design not programming. assignment outlines code used can be copied from the web as we are not being taught how to code or program this is not a programming assignment. my degree is media production nothing to do with programming. hence why i communicated my requirement and the truth. the whole project i'm undergoing is to display the dynamics of new media. i wanted to use this code in my project which is a small part of my overall outline. all my intensions have been communicated to my lecturer before as i am not a cheat. if this is still not expectable then fair enough and i thank you for taking the time and will remove the thread.
    Last edited by grandeani; 12-16-2009 at 04:58 PM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    my degree is media production nothing to do with programming.
    i'm looking to create a page that has some javascript to carry out an image rotation.
    Could you explain how you reconcile those two statements?

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well the degree im doing has a module to research new media. its how new media works, used to persuade entice suggest etc to people and how it helps our everyday lives. the assignment brief was networking. the goal is to illustrate how new media is used in allowing users to create their own narrative via non linear websites. so my assignment gets marked on my idea on how new media could be used to represent a non linear story, how to create a non linear narrative, the research into new media non linear narrative. our lecturer has taken us through how to write html and css but has informed us to search, locate and copy any javascript we wish to use as we are not being taught how to be web programmers.

    that is why im requesting code to perform the aforementioned. i am not a programmer nor studying to be one. that is why i was honest in mentioning university too. if i was cheating i wouldn't have mentioned my studies.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    OK, here you are. But you do not make it entirely clear what you mean by "rotate". This shuffles the images into random order and then rotates them in sequential (shuffled) order. This means that there is randomness but no duplication with the same image being displayed more than once at a time.

    This is of course a pretty basic script - I assume you can change the image names. You may of course have as many images as you want. You will want to specify the width and height of the image containers. Note that extreme accuracy of the quotes and commas is required. One of these too many or too few will simply stop the script working.

    The show starts on page load and continues indefinitely.


    Code:
    <img  id = "im1"><img id = "im2"><img id = "im3">
    
    <script type = "text/javascript">
    
    var imgArray = ['One.jpg','Two.jpg','Three.jpg','Four.jpg','Five.jpg', 'Six.jpg', 'Seven.jpg', 'Eight.jpg', 'Nine.jpg', 'Ten.jpg'];
    function randOrd(){return (Math.round(Math.random())-0.5)}
    imgArray.sort(randOrd);
    alert (imgArray);  // FOR TESTING
    var len = imgArray.length;
    var count = 0;
    
    rotate1();
    rotate2();
    rotate3();
    
    function rotate1() {
    document.getElementById("im1").src = imgArray[count];
    count++;
    if (count>=len) {count = 0}
    var tim1 = window.setTimeout("rotate1()", 3000);  // 3 seconds
    }
    
    
    function rotate2() {
    document.getElementById("im2").src = imgArray[count];
    count++;
    if (count>=len) {count = 0}
    var tim2 = window.setTimeout("rotate2()", 5000);  // 5 seconds
    }
    
    
    function rotate3() {
    document.getElementById("im3").src = imgArray[count];
    count++;
    if (count>=len) {count = 0}
    var tim2 = window.setTimeout("rotate3()", 7000);  // 7 seconds
    }
    
    </script>
    I have to say that the effect of the three images changing so frequently and abruptly is pretty horrible!

    "By three methods we may learn wisdom: First, by reflection, which is noblest; Second, by imitation, which is easiest; and third by experience, which is the bitterest."
    Last edited by Philip M; 12-16-2009 at 07:22 PM. Reason: Improved

  • #7
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for this this is awesome exactly what i was hoping for. there was a pop up box appearing when loading the page though so i removed the alert line, is that needed though? its great though thanks. not quite sure how to setup image containers but ill try using tables or div tags in the body or something

    again thanks for all your help much appreciated

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by grandeani;
    there was a pop up box appearing when loading the page though so i removed the alert line, is that needed though?
    Code:
    alert (imgArray);  // FOR TESTING
    I put that in just to show you how the array was shuffled.

    You will need to configure the image containers something like this:-

    Code:
    <center>
    <img  id = "im1" width = "150" height = "150" >&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<img id = "im2" width = "150" height = "150" >&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<img id = "im3" width = "150" height = "150">
    </center>
    Last edited by Philip M; 12-17-2009 at 07:28 AM.

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah ok.

    ok thanks again for this ill copy this and have a play around with it, brilliant. i was searching for days on the web to try and get exactly what i wanted your a life saver.

  • #10
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    OK, here you are. But you do not make it entirely clear what you mean by "rotate". This shuffles the images into random order and then rotates them in sequential (shuffled) order. This means that there is randomness but no duplication with the same image being displayed more than once at a time.

    This is of course a pretty basic script - I assume you can change the image names. You may of course have as many images as you want. You will want to specify the width and height of the image containers. Note that extreme accuracy of the quotes and commas is required. One of these too many or too few will simply stop the script working.

    The show starts on page load and continues indefinitely.


    Code:
    <img  id = "im1"><img id = "im2"><img id = "im3">
    
    <script type = "text/javascript">
    
    var imgArray = ['One.jpg','Two.jpg','Three.jpg','Four.jpg','Five.jpg', 'Six.jpg', 'Seven.jpg', 'Eight.jpg', 'Nine.jpg', 'Ten.jpg'];
    function randOrd(){return (Math.round(Math.random())-0.5)}
    imgArray.sort(randOrd);
    alert (imgArray);  // FOR TESTING
    var len = imgArray.length;
    var count = 0;
    
    rotate1();
    rotate2();
    rotate3();
    
    function rotate1() {
    document.getElementById("im1").src = imgArray[count];
    count++;
    if (count>=len) {count = 0}
    var tim1 = window.setTimeout("rotate1()", 3000);  // 3 seconds
    }
    
    
    function rotate2() {
    document.getElementById("im2").src = imgArray[count];
    count++;
    if (count>=len) {count = 0}
    var tim2 = window.setTimeout("rotate2()", 5000);  // 5 seconds
    }
    
    
    function rotate3() {
    document.getElementById("im3").src = imgArray[count];
    count++;
    if (count>=len) {count = 0}
    var tim2 = window.setTimeout("rotate3()", 7000);  // 7 seconds
    }
    
    </script>
    I have to say that the effect of the three images changing so frequently and abruptly is pretty horrible!

    "By three methods we may learn wisdom: First, by reflection, which is noblest; Second, by imitation, which is easiest; and third by experience, which is the bitterest."
    Hello,
    I really needed this. Can you or anyone please tell how can i have

    1). Custom website link for each image, like when the new banner appears it should be linked to a website specified in the script.
    2). Mouseover affect, like when we move the cursor on any image it shouldn't change (based on the time we have specified in the script) untill we move the cursor away

    Regards,
    Last edited by ineedhelpjs; 08-14-2011 at 04:49 AM.

  • #11
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by ineedhelpjs View Post
    In easy way i want to the clickable banners which would link them to different websites.
    One option is to put the image file names and their respective target urls in a 2D array.

    Then loop through the array with setTimeout or setInterval to change the banner <img>'s src and onclick event handler's target url to the current values in the 2D array.

    Post your html and javascript that you have so far and we can try to help you get it working.

  • #12
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    One option is to put the image file names and their respective target urls in a 2D array.

    Then loop through the array with setTimeout or setInterval to change the banner <img>'s src and onclick event handler's target url to the current values in the 2D array.

    Post your html and javascript that you have so far and we can try to help you get it working.
    I'm using
    only this

    <style>
    ul {list-style: none; margin: 0 auto; padding: 0; overflow: hidden; width: 960px;}
    ul > li {float: left; border: 0px; width: 480px; height: 80px;}
    </style>
    <ul>
    <li><img id = "im1" width = "480px" height = "80px" ></li> <li><img id = "im2"

    width = "480px" height = "80px" ></li>

    <script type = "text/javascript">

    var imgArray =

    ['1.gif','2.gif','3.jpg','4.jpg'];
    function randOrd(){return (Math.round(Math.random())-0.5)}
    imgArray.sort(randOrd);
    var len = imgArray.length;
    var count = 0;

    rotate1();
    rotate2();

    function rotate1() {
    document.getElementById("im1").src = imgArray[count];
    count++;
    if (count>=len) {count = 0}
    var tim1 = window.setTimeout("rotate1()", 10000); // 10 seconds
    }


    function rotate2() {
    document.getElementById("im2").src = imgArray[count];
    count++;
    if (count>=len) {count = 0}
    var tim2 = window.setTimeout("rotate2()", 10000); // 10 seconds
    }

    </script>
    Last edited by ineedhelpjs; 08-14-2011 at 05:09 AM.

  • #13
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    That code is way off what you asked for in your previous post.

    If you want to learn how to do it, imo a good place to start is to work through the w3schools html tutorials to create the html you need and then work through the w3schools javascript tutorials to create the image and href swapping you want.

    If you want someone to write the code for you, or modify someone else's code for you, then hopefully someone else will come along.

  • #14
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Try this:
    Fading Any Size Image Slideshow Demo

    • Accessible
    • No coding needed
    • Create the markup for the images, the code does the rest
    • Images may also be links
    • Pause onmouseover
    • Optional caption overlay onmouseover


    Just copy the code for yourself.
    Last edited by Sciliano; 08-14-2011 at 02:14 PM.


  •  

    Tags for this Thread

    Posting Permissions

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