CODEWITHSUNDEEP
javascripthtml
STRYKE__
STRYKE__

Reputation: 5

Why isn't my slideshow not working within my HTML?

I coded a simple slideshow with Javascript but it isn't working when I place it within my HTML page that I have created. So far I have tried to include it in different areas, different div's and from an external file. Nothing seems to be working. I have tested the code on blank HTML and it works. But when I use it within the page that I have put together, it wont load.

var i = 0; 			  // Start Point
var images = [];	// Images Array
var time = 3000;	// Time Between Switch

// Image List
images[0] = "gotpic1.jpg";
images[1] = "gotpic2.jpg";

// Change Image
function changeImg(){
  document.slide.src = images[i];

  // Check If Index Is Under Max
  if (i < images.length - 1){
    // Add 1 to Index
    i++; 
  } else { 
    // Reset Back To O
    i = 0;
  }

  // Run function every x seconds
  setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload = changeImg;
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-repeat:no-repeat;
  background-size: cover;
}
.gotlogo{
  text-align: center; 
}
.slider {
  border: solid black 2p
}
.slider{
  height: 300px;
  width: 500px;
}
<body style=" background-image: url(&quot;forest1.jpg&quot;);">
  <div class="gotlogo">
    <img src="gotlogo2.png" alt="GOT">
  </div>
  <div class="slider">
    <img name="slide" height="200" width="400">
  </div>
  <p>
    <br>
  </p>
</body>

Upvotes: 0

Views: 3737

Answers (2)

Faisal Rahman Avash
Faisal Rahman Avash

Reputation: 1256

Although there are a lot to of room for improvements, for now I'm giving you a working prototype of your version of code. Just added an id to the <img/> and how src is manipulated in changeImg()

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

</head>

<body style=" background-image: url(&quot;forest1.jpg&quot;);">
  <div class="gotlogo"> <img src="gotlogo2.png" alt="GOT"> </div>
  <div class="slider">
    <img name="slide" id="slide" height="200" width="400">
  </div>
  <p><br>
  </p>
  <script>
    var i = 0; // Start Point
    var images = []; // Images Array
    var time = 3000; // Time Between Switch

    // Image List
    images[0] = "http://www.buyersgohappy.com/blog/wp-content/uploads/2017/08/GOT-Kingdom-in-India-11-750x339.jpg";
    images[1] = "https://i.kym-cdn.com/entries/icons/mobile/000/010/576/got.jpg";


    // Change Image
    function changeImg() {
      document.getElementById("slide").src = images[i];

      // Check If Index Is Under Max
      if (i < images.length - 1) {
        // Add 1 to Index
        i++;
      } else {
        // Reset Back To O
        i = 0;
      }

      // Run function every x seconds
      setTimeout("changeImg()", time);
    }

    // Run function when page loads
    window.onload = changeImg;
  </script>
  <style>
    body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .gotlogo {
      text-align: center;
    }
    
    .slider {
      border: solid black 2px
    }
    
    .slider {
      height: 300px;
      width: 500px;
    }
  </style>
</body>

</html>

Having that said, let's see how you can improve your code. Please checkout the changeImg() function:

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

</head>

<body style=" background-image: url(&quot;forest1.jpg&quot;);">
  <div class="gotlogo"> <img src="gotlogo2.png" alt="GOT"> </div>
  <div class="slider">
    <img name="slide" id="slide" height="200" width="400">
  </div>
  <p><br>
  </p>
  <script>
    var i = 0; // Start Point
    var images = []; // Images Array
    var time = 3000; // Time Between Switch

    // Image List
    /*
    For local images:
    say you have a local folder structure like this:
    
    GOT
    |
    --> index.html (this file)
    |
    --> Images
        |
        --> got1.jpg
        |
        --> got2.jpg
        
    Now in you can can these images like:
    images[0] = "Images/got1.jpg"
    images[1] = "Images/got2.jpg"
    
    Let's try another example folder structure:
    
    GOT
    |
    --> Html
    |   |
    |   --> index.html (this file)
    |
    --> Images
        |
        --> got1.jpg
        |
        --> got2.jpg
        
    Now in you can can these images like:
    images[0] = "../Images/got1.jpg"
    images[1] = "../Images/got2.jpg"
    
    */
    images[0] = "http://www.buyersgohappy.com/blog/wp-content/uploads/2017/08/GOT-Kingdom-in-India-11-750x339.jpg";
    images[1] = "https://i.kym-cdn.com/entries/icons/mobile/000/010/576/got.jpg";


    // Change Image
    function changeImg() {
      document.getElementById("slide").src = images[i];

      // Keep index under the size of images array
      i = (i+1) % images.length;
    }

    // Run function when page loads
    window.onload = function() {
      // Run function every x seconds
      setInterval(changeImg, time);
    }
  </script>
  <style>
    body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .gotlogo {
      text-align: center;
    }
    
    .slider {
      border: solid black 2px
    }
    
    .slider {
      height: 300px;
      width: 500px;
    }
  </style>
</body>

</html>

Upvotes: 4

jasinth premkumar
jasinth premkumar

Reputation: 1413

u are using old fashioned way u maybe be practicing i just changed a bitin code

i used getElementsByName() function to find element

var i = 0; 			  // Start Point
var images = [];	// Images Array
var time = 3000;	// Time Between Switch

// Image List
images[0] = "https://www.w3schools.com/html/pic_trulli.jpg";
images[1] = "https://www.w3schools.com/html/img_girl.jpg";

// Change Image
function changeImg(){
  document.getElementsByName('slide')[0].src = images[i];

  // Check If Index Is Under Max
  if (i < images.length - 1){
    // Add 1 to Index
    i++; 
  } else { 
    // Reset Back To O
    i = 0;
  }

  // Run function every x seconds
  setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload = changeImg;
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-repeat:no-repeat;
  background-size: cover;
}
.gotlogo{
  text-align: center; 
}
.slider {
  border: solid black 2p
}
.slider{
  height: 300px;
  width: 500px;
}
<body style=" background-image: url(&quot;forest1.jpg&quot;);">
  <div class="gotlogo">
    <img src="gotlogo2.png" alt="GOT">
  </div>
  <div class="slider" name='w'>
    <img name="slide" height="200" width="400">
  </div>
  <p>
    <br>
  </p>
</body>

Upvotes: 0

Related Questions