Html Image Slide Show For Multiple Images

I've just got stuck with creating a Image slider. This image slider Shell be handling different Images for each Event. But at the Moment even the slider is not working for one.

Solution 1:

You have en error of comprehension about selector, try this :

    <div class="boxInner" class="bw pic">
        <img src="" id="slide" />
    </div>

<script type = "text/javascript" >
  var image1 = new Image();
image1.src = "http://www.louisetzeliemartin.org/medias/images/chat-1.jpg";
var image2 = new Image();
image2.src = "https://static.mediapart.fr/files/2016/01/30/chat.jpg";
   var step = 1;

    function slideit() {
      document.getElementById('slide').src = eval("image" + step + ".src");
      if (step < 2)
        step++;
      else
        step = 1;
      setTimeout("slideit()", 2500);
    }
    slideit();
</script>

Version with array :

<script type = "text/javascript" >


  var image1 = new Image();
    image1.src = "http://www.louisetzeliemartin.org/medias/images/chat-1.jpg";


var image2 = new Image();
image2.src = "https://static.mediapart.fr/files/2016/01/30/chat.jpg";

var images = [image1,image2];//here i create an array "images" with two elements "image1" and "image2"

   var step = 0;//step is now 0 because 1st index of an array is 0

    function slideit() {
      document.getElementById('slide').src = images[step].src;//i want read index n of my array
      if (step < (images.length-1))//lenght give number of element in this array
        step++;
      else
        step = 0;
      setTimeout("slideit()", 2500);
    }
    slideit();
</script>

Version with 2 images :

 <div class="boxInner" class="bw pic">
        <img src="" id="slide1" />
        <img src="" id="slide2" />
    </div>

<script type = "text/javascript" >
var image1 = new Image();
image1.src = "http://www.louisetzeliemartin.org/medias/images/chat-1.jpg";


var image2 = new Image();
image2.src = "https://static.mediapart.fr/files/2016/01/30/chat.jpg";

var image3 = new Image();
image3.src = "http://media.virginradio.fr/article-2505914-fb-f1415609183/chat-mignon-petit-chaton-therapie-detente.jpg";


var image4 = new Image();
image4.src = "http://media.meltydiscovery.fr/article-2927858-fb/chat-chaton-chats-biso-le-caire-egypte-metro.jpg";


var images = [image1,image2,image3,image4];

   var step = 0;//step is now 0 because 1st index of an array is 0

    function slideit() {
      document.getElementById('slide1').src = images[step].src;
      document.getElementById('slide2').src = images[step+1].src;
      if (step < (images.length-1)/2)
        step=step+2;
      else
        step = 0;
      setTimeout("slideit()", 2000);
    }
    slideit();
</script>