Creating a basic image carousel with JavaScript, CSS, and HTML

Question

Creating a basic image carousel with JavaScript, CSS, and HTML

After running the code, I encountered an issue where the first image displays but then after one second, only a white blank screen appears with no further action. It seems like there may be an error in the JavaScript code. Below is the code that was attempted:

<!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>
<style type="text/css">
img {
    width: 582px;
    height: 306px;

}

</style>
</head>

<body>

<img src="image-slider-1.jpg" id="myphoto" />

<script type="text/javascript">

var image=document.getElementById("myphoto");
var imageArray=("image-slider-1.jpg","image-slider-2.jpg","image-slider-3.jpg","image-slider-4.jpg","image-slider-5.jpg");

var imageIndex=0;

function slide(){

image.setAttribute("src",imageArray [imageIndex] );
imageIndex++;
if(imageIndex>=imageArray.length) {
    imageIndex=0;

}
}
setInterval(slide,1000);

</script>
</body>
</html>

Any assistance or guidance would be greatly appreciated.

javascript html css

Answer 1

Answer №1

You should definitely give this a try, it did the trick for me!

const interval = 3700;  // Set the time interval

const picsArr = [
    'abc.jpg',
    'def.jpg',
    'ghi.jpg'
];

let timer; // Timer variable
let currentIndex = 0;
const picLength = picsArr.length;

const preloader = [];

for (let i = 0; i < picLength; i++) {
       preloader[i] = new Image();
       preloader[i].src = picsArr[i];
}

function runBackgroundSlideShow() {
    if (document.body) {
        document.body.background = picsArr[currentIndex];
        currentIndex++;
        
        if (currentIndex > (picLength - 1)) {
            currentIndex = 0; // Start from the first picture again
        }

        timer = setTimeout('runBackgroundSlideShow()', interval); 
    }
}

Answer 2

You should definitely give this a try, it did the trick for me!

const interval = 3700;  // Set the time interval

const picsArr = [
    'abc.jpg',
    'def.jpg',
    'ghi.jpg'
];

let timer; // Timer variable
let currentIndex = 0;
const picLength = picsArr.length;

const preloader = [];

for (let i = 0; i < picLength; i++) {
       preloader[i] = new Image();
       preloader[i].src = picsArr[i];
}

function runBackgroundSlideShow() {
    if (document.body) {
        document.body.background = picsArr[currentIndex];
        currentIndex++;
        
        if (currentIndex > (picLength - 1)) {
            currentIndex = 0; // Start from the first picture again
        }

        timer = setTimeout('runBackgroundSlideShow()', interval); 
    }
}

Answer 3

Answer №2

Your expectation is not met by the following line of code:

var imgArr=("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");

If you check the content of imgArr after this line, it will only contain the string "img5.jpg". (Why? Learn about how the comma operator works in javascript.)

To correctly define an array of strings, use the [] notation:

var imgArray=["img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"];

Answer 4

Your expectation is not met by the following line of code:

var imgArr=("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");

If you check the content of imgArr after this line, it will only contain the string "img5.jpg". (Why? Learn about how the comma operator works in javascript.)

To correctly define an array of strings, use the [] notation:

var imgArray=["img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"];

Creating a basic image carousel with JavaScript, CSS, and HTML

Answer №1

Answer №2

Similar questions

Including a JavaScript file in an HTML document initiates a server request, which can lead to potential errors

Trigger a modal to open based on a specific condition

Chrome Developer Tools - Array Length Discrepancies

The controller is unable to provide the output in JSON format within the AJAX response

Passing null as a parameter in ngResource AngularJS

Adjust parent div size automatically when child is resized - jQuery Resizable Plugin

The specified method is not recognized as a function in the ReactJS library

Exploring ways to assign a value to an HTML element utilizing Jquery in combination with ASP.NET MVC 4 complex model information

Is it possible for a hybrid app using Angular 7/1.x to enable Hot Module Replacement (H

Can $refs cause issues with interpolation?

React's createRef() versus callback refs: Which one provides the ultimate edge in performance?

The development of the React app will pause momentarily upon encountering a single low-severity vulnerability. To address this, you can either run `npm audit fix` to resolve it, or use `npm audit` to gain

Leveraging jQuery selectors to manipulate data received from an Ajax response

Expand and collapse divs using jQuery when a JavaScript do_PostBack link is clicked

Click event not triggering to update image

User retrieval failed following successful passport authentication

"Keep the div locked to the screen when the bottom of the div aligns with the

I am encountering the error 'user.matchPassword is not a function' while making a call to my API using bcryptjs in my Node.js and Express application. Can someone help me understand why

What are the steps to execute a file on localhost using an HTML page?

Difficulties encountered when initiating CRA using npm start