How to make background images change every 3 seconds-CodePudding

I need to get images to change every 3 seconds using only Javascript. Here's what I came up with:

var imageArray = [
  "assets/background1.jpeg",
  "assets/background2.jpeg",
  "assets/background3.jpeg"
];

var imageIndex = 0; 

function changeImage() {
  imageArray.setAttribute("src",imageArray[imageIndex]);
  imageIndex = (imageIndex   1) % imageArray.length;
}

setInterval(changeImage, 5000);

Any ideas? Currently it doesn't display anything.

CodePudding user response：

You are setting the image on the imageArray

imageArray.setAttribute( "src", imageArray[imageIndex] );

but you should have to add src to image element

image.setAttribute( "src", imageArray[imageIndex] );

const image = document.querySelector( "img" );
var imageArray = [
    "https://media.istockphoto.com/photos/building-a-strong-team-wooden-blocks-with-people-icon-on-pink-human-picture-id1227412970?b=1&k=6&m=1227412970&s=170667a&w=0&h=2vUvq_9zUItF9UJuySkix_rZd53MM32W-QzZWwjq0zI=",
    "https://media.istockphoto.com/photos/womens-hand-typing-on-mobile-smartphone-live-chat-chatting-on-web-picture-id1217093906?b=1&k=6&m=1217093906&s=170667a&w=0&h=57BAau-SLTJ2s7WjehjH9HaCeou5FMIgG0p00QW-YaE=",
    "https://media.istockphoto.com/photos/partnership-of-business-concept-business-network-picture-id1223929743?b=1&k=6&m=1223929743&s=170667a&w=0&h=asL62WU1trQUqj_u0VpQJ56-FW88RE0sq5HhPMwthaQ="
];

// First time set the first image indexed at 0
image.setAttribute( "src", imageArray[0] )

var imageIndex = 1;
function changeImage() {
    console.log( `showing image #${imageIndex}` );
    image.setAttribute( "src", imageArray[imageIndex] );
    imageIndex = ( imageIndex   1 ) % imageArray.length;
}

setInterval( changeImage, 5000 );

<img src="" alt="" srcset="">

CodePudding user response：

You need to use the DOM element to set the attribute. You are doing it for the array which is invalid.

var imageArray = ['https://media-cldnry.s-nbcnews.com/image/upload/newscms/2021_22/3479356/210601-main-pups-canine-companions-for-independence-ew-113p.jpg', 'https://cdn.shopify.com/s/files/1/0272/4770/6214/articles/when-do-puppies-start-walking.jpg?v=1593020034', 'https://dogtime.com/assets/uploads/2011/03/puppy-development.jpg']

var imgHolder = document.getElementById('images');
var imageIndex = 0;
function changeImage() {
   imageIndex = (imageIndex   1) % imageArray.length;
   imgHolder.setAttribute("src",imageArray[imageIndex])
}

setInterval(changeImage, 3000);

<img id="images" width=200 src="https://dogtime.com/assets/uploads/2011/03/puppy-development.jpg"></img>

CodePudding user response：

imageArray.setAttribute("src",imageArray[imageIndex])

You must setAttribute for HTML element, not imageArray. You can see the below demo:

var imageArray = [
  "https://image.freepik.com/free-vector/floral-wedding-homepage-template_23-2149077924.jpg",
  "https://image.freepik.com/free-vector/cartoon-podium-background-design-illustration_52683-70692.jpg",
  "https://image.freepik.com/free-vector/farm-landscape-scene-with-barn-windmill_1308-58771.jpg"
];

// Move this variable to before the startChange and setInterval to let it have the value on the first time
var imageIndex = 0;

// Call on page load
startChange();

// Show first image and set interval
function startChange() {
  changeImage();
  setInterval(changeImage, 5000);
}

// Main function to get HTML element and set image into it
function changeImage() {
  document.getElementById('image').setAttribute("src", imageArray[imageIndex]);
  imageIndex = (imageIndex   1) % imageArray.length;
}

<img id="image" src="" />