Javascript for slideshow

Question

Can someone suggest good javascript code to implement slideshow such that all the elements of slideshow are declared in or an array.I want it using purely javascript without using jQuery

You got some good answers. You should accept one. – abalter Nov 25 '13 at 04:53 — abalter, Nov 25 '13 at 04:53

score 3 · Answer 1 · answered May 25 '12 at 10:08

This may be useful to you. Copy and replace images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image slide show</title>
<style type="text/css">
body {
    background:#FFC;
}
input[type="button"] {
    background:#939907;
    color:#fff;
    border:1px solid #434603;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    font-weight:bold;
    cursor:pointer;
    height:25px;
}
img {
    width:525px;
    height:200px;
    border:2px solid #CF3;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -ms-border-radius:15px;
}
</style>
<script type="text/javascript">
var images=new Array();
var i=0, t, f=false;

images[0] ="images/heli1.jpg";
images[1] ="images/heli2.JPG";
images[2] ="images/heli3.JPG";
images[3] ="images/heli4.JPG";
images[4] ="images/heli5.JPG";
images[5] ="images/heli6.JPG";
images[6] ="images/heli7.JPG";
images[7] ="images/heli2.JPG";
images[8] ="images/heli9.JPG";
images[9] ="images/heli1.jpg";
images[10] ="images/heli2.JPG";
images[11] ="images/heli3.JPG";
images[12] ="images/heli4.JPG";
images[13] ="images/heli5.JPG";
images[14] ="images/heli6.JPG";


    function start(){
        if(i>=images.length){
            i=0;
            document.getElementById('img').src=images[i];   
            i++;        
        }
        else{
            document.getElementById('img').src=images[i];
            i++;
        }
        t=setTimeout("start()", 1000);  
    }
    function play(){
        if(f==false){
            f=true;
            start();
        }
    }

    function Stop(){
        clearTimeout(t);
        f=false;
    }

    function next(){
        if(i>=images.length){
            i=0;
            document.getElementById('img').src=images[i];   
            i++;
        }
        else{
            document.getElementById('img').src=images[i];
            i++;
        }
    }

    function previous(){
        if(i>=images.lenght){
            i=images.length;
            document.getElementById('img').src=images[i];
            i--;
        }
        else if(i<=0){
            i=images.length;
            document.getElementById('img').src=images[i-1];
            i--;
        }
        else if(i>images.length){

            document.getElementById('img').src=images[images.length-i]; 
        }
        else if(i<=images.length || i>0){
            document.getElementById('img').src=images[i-1];
            i--;
        }
    }

</script>
</head>

<body>
<table width="50%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><input type="button" value="Previous" onclick="previous()" /></td>
    <td align="center"><a href="#"><img src="images/heli6.JPG" alt=""  id="img" /></a></td>
    <td><input type="button" value="Next" onclick="next()" /></td>
  </tr>
  <tr>
    <td colspan="3" align="center" height="50"><input type="button" value="Play" onclick="play()" />
      <input type="button" value="Stop" onclick="Stop()" /></td>
  </tr>
</table>
</body>
</html>

score 2 · Answer 2 · answered May 25 '12 at 10:08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<script language="javascript">


loaded_img = 0;
no_of_img = 12;

img_name = new Array();
img_name.length = no_of_img - 1;

for ( var count = 0; count < no_of_img; count++)
{
   var file_num = count + 1;
   var filename = ("img" + file_num + ".jpg");
    img_name[count] = filename;
}


var whichlink=0

function slideit(){
if (!document.images)
return
document.images.myimage.src=img_name[loaded_img].src
whichlink=loaded_img
if (loaded_img<img_name.length-1)
loaded_img++
else
loaded_img=0
setTimeout("slideit()",1000)
}
slideit()


function changeImage(direction)
{
    loaded_img=loaded_img+direction;
    if (loaded_img < 0)
        loaded_img = no_of_img - 1;
    if (loaded_img == no_of_img)
        loaded_img = 0;
        document.myimage.src = img_name[loaded_img];
}


</script>



<script language="javascript">
//slideshowimages()=new Array()
//slideshowimages("img1.jpg")

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.myimage.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",1000)
}
slideit()

</script>

<form>

<a href="javascript:changeImage(-1)"><img src="left-disabled.gif" width="27" height="22" border="0"></a>


<img src="img1.jpg" name="myimage">


<a href="javascript:changeImage(1)"><img src="right-enabled.gif" width="27" height="22" border="0"></a>
</form>

</body>
</html>

this is simple slide show code in javascript, by clicking left and right buttons are also have for your purpose. — Karthi Shan, May 25 '12 at 10:09
which type of slideshow u want? automatically sliding images or clicking by buttons left move for left button vice versa — Karthi Shan, May 25 '12 at 10:13

instancetype · Answer 3 · 2014-12-25T03:00:28.937

This question is old, but here is a more comprehensive example with pure JavaScript. It assumes that index.html and slideshow.js are on the same level. It begins with an automatically playing slideshow (that can be paused and resumed), and it also has previous and next buttons. If you only want one of those sets of functionality, it should be fairly straightforward to remove the other.

The HTML is very barebones and can be altered as desired for the most part as long as you mind the ids. I haven't provided any styling, so that's all you.

<!-- index.html -->

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slideshow</title>
</head>
<body>

<section>
    <div>
        <img id="image">
    </div>
    <div>
        <button type="button" id="playBtn">Play</button>
        <button type="button" id="pauseBtn">Pause</button>
    </div>
    <div>
        <button type="button" id="prevBtn">Prev</button>
        <button type="button" id="nextBtn">Next</button>
    </div>
</section>

<script src="slideshow.js"></script>
</body>
</html>

If you want to support IE8 and/or below, you'll need to ditch the DOMContentLoaded listener. Essentially, you could just extract the IIFE and then replace its final line return beginSlideshow with beginSlideshow(). I hope that makes sense, and I hope you find this helpful. Good luck.

// slideshow.js

document.addEventListener(
  // IE 9 and up. See http://caniuse.com/#feat=domcontentloaded
  'DOMContentLoaded'

, (function STRICT() {
    'use strict';

    // Avoid 'new' and stick to array literals where possible.
    var images =
          [ 'img/30.gif'
          , 'img/31.gif'
          , 'img/32.gif'
          , 'img/33.gif'
          , 'img/34.gif'
          ]

      , img = document.getElementById('image')
      , playBtn = document.getElementById('playBtn')
      , pauseBtn = document.getElementById('pauseBtn')
      , prevBtn = document.getElementById('prevBtn')
      , nextBtn = document.getElementById('nextBtn')

      , index = 0
      , indexOfLastImage = images.length - 1

      , play
      , playInterval
      , pause
      , goToPrevious
      , goToNext
      , beginSlideShow


    play = function() {
      playInterval = setInterval(
        function() {
          if (index === indexOfLastImage) { index = 0 }

          img.src = images[++index]
        }
      , 3000
      )
    }

    pause = function() {
      clearInterval(playInterval)
      playInterval = null
    }


    goToPrevious = function() {
      // if the slideshow was running
      if (playInterval) { pause() }
      // if we're at the beginning of the array
      if (index === 0) {
        index = indexOfLastImage + 1
      }
      img.src = images[--index]
    }

    goToNext = function() {
      // if the slideshow was running
      if (playInterval) { pause() }
      // if we're at the beginning of the array
      if (index === indexOfLastImage) {
        index = -1
      }
      img.src = images[++index]
    }


    beginSlideShow = function() {
      // add listeners
      playBtn.addEventListener('click', play)
      pauseBtn.addEventListener('click', pause)
      prevBtn.addEventListener('click', goToPrevious)
      nextBtn.addEventListener('click', goToNext)
      // set initial image for display prior to first interval
      img.src = images[index]
      // kick off auto play
      play()
    }

    // This is what's attached to and will fire on the DOMContentLoaded event
    return beginSlideShow

  }())
)

Javascript for slideshow

3 Answers3

Linked