www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript slideshow

  1. #1
    Join Date
    Nov 2013
    Posts
    15

    Javascript slideshow

    Hi

    I have this slideshow, and every image appear 2 seconds.
    I want to set the duration of every image to my need.
    For example:
    - show sample01.jpg for 5 seconds then
    - show sample02.jpg for 4 seconds then
    - show sample03.jpg for 9 seconds then
    - show sample04.jpg for 15 seconds then
    - show sample05.jpg for 11 seconds then start again with sample01.jpg for 5 seconds and so on ...

    Code:
    <html>
    
    <head>
       <title>Welcome!</title>
       <script type="text/javascript">
           var image1 = new Image()
               image1.src = "sample01.jpg"
           var image2 = new Image()
               image2.src = "sample02.jpg"
           var image3 = new Image()
               image3.src = "sample03.jpg"
           var image4 = new Image()
               image4.src = "sample04.jpg"
           var image5 = new Image()
               image5.src = "sample05.jpg"
       </script>
    </head>
    
    <body>
       <center>
           <img src="sample01.jpg" name="slider1" width=800 height=380 />
           <script type="text/javascript">
           var x=1;
           function slider()
           {
               document.images.slider1.src = eval("image"+x+".src");
               if (x<5)
                   x++;
               else
                   x=1;
               setTimeout("slider()",2000);
           }
           slider();
           </script>
       </center>
    </body>
    
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    Some changes to your code enclosed.
    Substitute your own 'baseURL' and "imgList" array element filenames.
    Code:
    <html>
    <head>
    <title>Welcome!</title>
    <script type="text/javascript">
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = [
       ['11.jpg',5000], ['12.jpg',4000], ['13.jpg',9000], ['14.jpg',15000], ['15.jpg',11000]
    ];
    </script>
    </head>
    
    <body>
    <center>
    <img src="" id="sliderImg" width='800' height='380' />
    </center>
    
    <script type="text/javascript">
    function slider() {
      if (sliderCnt<(imgList.length-1)) { sliderCnt++ } else { sliderCnt=0; }
      document.getElementById('sliderImg').src = baseURL+imgList[sliderCnt][0];
      setTimeout("slider()",imgList[sliderCnt][1]);
    }
    
    var sliderCnt = imgList.length;
    slider(); 
    </script>
    </body>
    
    </html>
    Post back if you don't understand the changes.

    Good Luck!




    As an after thought, here's an alternate version that eliminates the need for a global variable.
    Code:
    <html>
    <head>
    <title>Welcome!</title>
    <script type="text/javascript">
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = [
       ['11.jpg',1000], ['12.jpg',2000], ['13.jpg',3000], ['14.jpg',4000], ['15.jpg',5000]
    ];
    </script>
    </head>
    
    <body>
    <center>
    <img src="" id="sliderImg" width='800' height='380' />
    </center>
    
    <script type="text/javascript">
    function slider() {
      var sliderCnt = document.getElementById('sliderImg').value;
      if (sliderCnt < (imgList.length-1)) { sliderCnt++ } else { sliderCnt=0; }
      document.getElementById('sliderImg').value = sliderCnt;
      document.getElementById('sliderImg').src = baseURL+imgList[sliderCnt][0];
      setTimeout("slider()",imgList[sliderCnt][1]);
    }
    
    document.getElementById('sliderImg').value = imgList.length-1;  // create attribute for <img> tag
    slider(); 
    </script>
    </body>
    
    </html>
    Last edited by JMRKER; 11-30-2013 at 06:14 PM.

  3. #3
    Join Date
    Nov 2013
    Posts
    15
    JMRKER thank you! You are the best.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    You're most welcome.
    Happy to help.
    Good Luck!

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