Generate array of image in javascript inside

Question

I need to make the background image in div tag and it has to change automatically, I already put the array of images inside the javascript, but the images is not showing when i'm run the site.The background should behind the menu header.

This is the div

<div style="min-height:1000px;position:relative;" id="home">

below of the div is containing the logo, menu and nav part.

         <div class="container">
          <div class="fixed-header">
              <!--logo-->
               <div class="logo" >
                  <a href="index.html">
                      <img src="images/logo.png" alt="logo mazmida" height="142" width="242">
                      </a>
               </div>
                <!--//logo-->

This is the javascript

 <script>
   var imgArray = [
    'images/1.jpg',
    'images/2.jpg',
    'images/3.jpg'],       

curIndex = 0;
    imgDuration = 2000;        



function slideShow() {
    document.getElementID('home').src = imgArray[curIndex];
    curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
    setTimeout("slideShow()", imgDuration);
}
slideShow();

there are few syntax errors , closing tag of div and there is not src tag for div which should be image element — Naga Sai A, Mar 16 '18 at 03:03
the tag is already close, so i need to put the src tag inside the div? — Ghost, Mar 16 '18 at 03:04
It's not `document.getElementID`, it's `document.getElementById`, and a div does not have a src property. — R. Schifini, Mar 16 '18 at 03:13

score 1 · Answer 1 · answered Mar 16 '18 at 03:34

You have a few issues with your script. I've made a live JSbin example here:

https://jsbin.com/welifusomi/edit?html,output

  <script>
   var imgArray = [
    'https://upload.wikimedia.org/wikipedia/en/thumb/0/02/Homer_Simpson_2006.png/220px-Homer_Simpson_2006.png',
    'https://upload.wikimedia.org/wikipedia/en/thumb/0/0b/Marge_Simpson.png/220px-Marge_Simpson.png',
    'https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png'
   ]; 

   var curIndex = 0;
   var imgDuration = 1000;        

  var el = document.getElementById('home'); 

function slideShow() {
    el.style.backgroundImage = 'url(' + imgArray[curIndex % 3] + ')';
    curIndex++;
    setTimeout("slideShow()", imgDuration);
}
slideShow();
  </script>

There are a few issues with your script:

On the element since it's a div not an img, you need to set style.backgroundImage instead of src. Look at https://developer.mozilla.org/en-US/docs/Web/CSS/background for other attributes to related to background image CSS
Also it's document.getElementById

Optimizations

And you can use mod % trick to avoid zero reset
Use setInterval instead of setTimeout

Further optimzations

Use requestAnimationFrame instead of setTimeout/setInterval

I suggest getting familiar with your browser debugging tools which would help identify many of the issues you face.

score 0 · Answer 2 · answered Mar 16 '18 at 03:08

0

document.getElementID('home').src = imgArray[curIndex]

You are targeting a div with an ID of home, but this is not an Image element (ie ,

But since you want to alter the background colour of the DIV, then you use querySelector using javascript and store it in a variable, then you can target the background property of this div (ie Background colour).

I hope this helps.

answered Mar 16 '18 at 03:08

C Williams

850
12
19

I want it to be image not colour – Ghost Mar 16 '18 at 03:26
yeah, changing image src is not an attribute of a div, but for an img element. I only said background-colour as an example of things that can be changed on a div. – C Williams Mar 16 '18 at 09:40

score 0 · Answer 3 · answered Mar 16 '18 at 03:30

0

You are trying to change the src property of a div, but divs do not have such property.

Try this:

document.getElementById('home').style.backgroundImage = "url('" + imgArray[curIndex] + "')"

This changes the style of the target div, more precisely the image to be used as background.

answered Mar 16 '18 at 03:30

R. Schifini

9,085
2
26
32

Still nothing there. – Ghost Mar 16 '18 at 03:37

score 0 · Answer 4 · edited Mar 16 '18 at 03:54

0

As you want to change the background image of the div, instead of document.getElementID('home').src = imgArray[curIndex] use document.getElementById("#home").style.backgroundImage = "url('imageArray[curIndex]')";

in JavaScript or

$('#home').css('background-image', 'url("' + imageArray[curIndex] + '")'); in jquery.

edited Mar 16 '18 at 03:54

Cesar Loachamin

2,740
4
25
33

answered Mar 16 '18 at 03:30

Ekta Tiwari

11
1
3

I'm new to jquery, where should i put the jquery? – Ghost Mar 16 '18 at 03:38
For jQuery put jQuery CDN between the head tag. And start working on it. To learn JQuery refer : https://www.w3schools.com/jquery/default.asp . – Ekta Tiwari Mar 16 '18 at 08:12

Naga Sai A · Answer 5 · 2018-03-16T03:55:28.360

0

To achieve expected result, use below option of using setInterval

Please correct below syntax errors

document.getElementID to document.getElementById
.src attribute is not available on div tags
Create img element and add src to it
Finally use setInterval instead of setTimeout outside slideShow function

 var imgArray = [
    'http://www.w3schools.com/w3css/img_avatar3.png',
    'https://tse2.mm.bing.net/th?id=OIP.ySEgAgJIlDQsIQTu_MeoLwHaHa&pid=15.1&P=0&w=300&h=300',
    'https://tse4.mm.bing.net/th?id=OIP.wBAPnR04OfXaHuFI9Ny2bgHaE8&pid=15.1&P=0&w=243&h=163'],       
curIndex = 0;
    imgDuration = 2000;        

var home = document.getElementById('home')
var image = document.createElement('img')

function slideShow() {
    if(curIndex != imgArray.length-1) { 
      image.src = imgArray[curIndex];
      home.appendChild(image)
      curIndex++;
    }else{
      curIndex = 0;
    } 
}
setInterval(slideShow,2000)

<div style="position:relative;" id="home"></div>

code sample - https://codepen.io/nagasai/pen/JLKvME

edited Mar 16 '18 at 03:55

answered Mar 16 '18 at 03:36

Naga Sai A

10,771
1
21
40

those styles , I have used for reference, you can replace them with your actual css – Naga Sai A Mar 16 '18 at 03:54
did you create var home = document.getElementById('home') to appendChild? not seeing errors on codepen and Run code snippet in my answer – Naga Sai A Mar 16 '18 at 04:05
syntax error , var image = document.createElement('banner') should be var image = document.createElement('img') to create img tag – Naga Sai A Mar 16 '18 at 04:12
still same i put banner.img – Ghost Mar 16 '18 at 04:21
var image = document.createElement('img') , please check this out https://stackoverflow.com/questions/1232793/javascript-set-img-src – Naga Sai A Mar 16 '18 at 04:23

Generate array of image in javascript inside

5 Answers5