How can you create a basic slideshow without relying on jQuery to cycle through images?

Question

How can you create a basic slideshow without relying on jQuery to cycle through images?

Imagine you have a div containing 3 images.

Is there a way to build a basic slideshow that smoothly transitions between the images, showing each one for 5 seconds before moving on to the next one and eventually looping back to the first image without relying on jquery or any other framework?

javascript jquery

Answer 1

Answer №1

(function () {
    var elements = document.getElementById('your_div').getElementsByTagName('img'),
        count = 0;
    elements[0].style.display = 'block';
    setInterval(function () {
        elements[count].style.display = 'none';
        count = (count + 1) % elements.length;
        elements[count].style.display = 'block';
    }, 5000);
}());

Sample HTML Link: http://jsfiddle.net/Zq7KB/1/

Update: Came across a more refined demonstration above that utilized .length.

Answer 2

(function () {
    var elements = document.getElementById('your_div').getElementsByTagName('img'),
        count = 0;
    elements[0].style.display = 'block';
    setInterval(function () {
        elements[count].style.display = 'none';
        count = (count + 1) % elements.length;
        elements[count].style.display = 'block';
    }, 5000);
}());

Sample HTML Link: http://jsfiddle.net/Zq7KB/1/

Update: Came across a more refined demonstration above that utilized .length.

Answer 3

Answer №2

To create a timed slideshow, you can utilize the setInterval method along with setting the src attribute of an img element:

window.onload = function() {
    var slides = [ "path_to_image_one",
                   "path_to_image_two",
                   "path_to_image_three" // ...
                 ],
        index = 0,
        timer = 0;

    // Display the initial slide
    showNextSlide();

    // Switch to the next slide every five seconds
    timer = setInterval(showNextSlide, 5000);

    // Function to display the next slide   
    function showNextSlide() {
        if (index >= slides.length) {
            index = 0;
        }
        document.getElementById('theImage').src = slides[index++];
    }
};

Ensure your image markup is as follows:

<img id="theImage" src="path_to_initial_placeholder">

Keep in mind that the timer handle is stored in timer, which can be used to cancel the timer if necessary to halt the slideshow.

Update: If you need to fetch images from a specific div instead of hardcoded paths, here's an updated version that dynamically populates the slides array by extracting direct child IMG elements from a div with the ID "theDiv":

window.onload = function() {
    var slides = [],
        index = 0,
        timer = 0,
        node;

    // Retrieve the slides
    for (node = document.getElementById('theDiv').childNodes;
         node;
         node = node.nextSibling) {
        if (node.nodeType == 1 && node.tagName == "IMG") {
            slides.push(node.src);
        }
    }

    // Display the initial slide
    showNextSlide();

    // Switch to the next slide every five seconds
    timer = setInterval(showNextSlide, 5000);

    // Function to display the next slide    
    function showNextSlide() {
        if (index >= slides.length) {
            index = 0;
        }
        document.getElementById('theImage').src = slides[index++];
    }
};

Answer 4

To create a timed slideshow, you can utilize the setInterval method along with setting the src attribute of an img element:

window.onload = function() {
    var slides = [ "path_to_image_one",
                   "path_to_image_two",
                   "path_to_image_three" // ...
                 ],
        index = 0,
        timer = 0;

    // Display the initial slide
    showNextSlide();

    // Switch to the next slide every five seconds
    timer = setInterval(showNextSlide, 5000);

    // Function to display the next slide   
    function showNextSlide() {
        if (index >= slides.length) {
            index = 0;
        }
        document.getElementById('theImage').src = slides[index++];
    }
};

Ensure your image markup is as follows:

<img id="theImage" src="path_to_initial_placeholder">

Keep in mind that the timer handle is stored in timer, which can be used to cancel the timer if necessary to halt the slideshow.

Update: If you need to fetch images from a specific div instead of hardcoded paths, here's an updated version that dynamically populates the slides array by extracting direct child IMG elements from a div with the ID "theDiv":

window.onload = function() {
    var slides = [],
        index = 0,
        timer = 0,
        node;

    // Retrieve the slides
    for (node = document.getElementById('theDiv').childNodes;
         node;
         node = node.nextSibling) {
        if (node.nodeType == 1 && node.tagName == "IMG") {
            slides.push(node.src);
        }
    }

    // Display the initial slide
    showNextSlide();

    // Switch to the next slide every five seconds
    timer = setInterval(showNextSlide, 5000);

    // Function to display the next slide    
    function showNextSlide() {
        if (index >= slides.length) {
            index = 0;
        }
        document.getElementById('theImage').src = slides[index++];
    }
};

Answer 5

Answer №3

To control the <div>, you'll need to first identify it by its "id" attribute:

var mainDiv = document.getElementById("mainContainer");

From there, a timer can be set up to rotate through different images:

(function(div, delay) {
  var index = 0;
  var images = div.getElementsByTagName('img');
  function displayOne() {
    for (var i = 0; i < images.length; ++i)
      images[i].style.display = 'none';
    images[index].style.display = '';
    index = (index + 1) % images.length;
    setTimeout(displayOne, delay);
  }

  displayOne();
})(mainDiv, 4000);

Answer 6

To control the <div>, you'll need to first identify it by its "id" attribute:

var mainDiv = document.getElementById("mainContainer");

From there, a timer can be set up to rotate through different images:

(function(div, delay) {
  var index = 0;
  var images = div.getElementsByTagName('img');
  function displayOne() {
    for (var i = 0; i < images.length; ++i)
      images[i].style.display = 'none';
    images[index].style.display = '';
    index = (index + 1) % images.length;
    setTimeout(displayOne, delay);
  }

  displayOne();
})(mainDiv, 4000);

Answer 7

Answer №4

let images = new Array('/img/1.jpg', '/img/2.jpg', '/img/3.jpg');

setTimeout("displayNextImage()",5000);

function displayNextImage()
{
let container = document.getElementById('image_container');
container.innerHTML = "<img src='" + images[i] + "' />";
if(i==2) { i = 1; }else { i = i + 1; }
}

Answer 8

let images = new Array('/img/1.jpg', '/img/2.jpg', '/img/3.jpg');

setTimeout("displayNextImage()",5000);

function displayNextImage()
{
let container = document.getElementById('image_container');
container.innerHTML = "<img src='" + images[i] + "' />";
if(i==2) { i = 1; }else { i = i + 1; }
}

Answer 9

Answer №5

Although this answer seems straightforward, there were a few mistakes that I noticed. Instead of using setTimeout, the correct function to use in this case would be setInterval. Additionally, the initial index was not properly set. I also made an adjustment to ensure that the first image loads immediately.

var images = new Array('imgs/18/P1050294-XL.jpg', 'imgs/18/P1050293-XL.jpg', 'imgs/18/P1040984-XL.jpg', 'imgs/18/P1040983-XL.jpg', 'imgs/18/P1040982-XL.jpg');

var path = 'mypath';

document.getElementById('slideShow').innerHTML = "<img width='600px' src='" + path + images[0] + "' />";  // Load First image
var i = 1;  // Set counter to the second image for the first iteration of the loop

setInterval("show_next(path)", 5000);

function show_next(path)
{
var container = document.getElementById('slideShow');
container.innerHTML = "<img width='600px' src='" + path + images[i] + "' />";
if(i === 4) { i = 0; } else { i = i + 1; }
}

Answer 10

Although this answer seems straightforward, there were a few mistakes that I noticed. Instead of using setTimeout, the correct function to use in this case would be setInterval. Additionally, the initial index was not properly set. I also made an adjustment to ensure that the first image loads immediately.

var images = new Array('imgs/18/P1050294-XL.jpg', 'imgs/18/P1050293-XL.jpg', 'imgs/18/P1040984-XL.jpg', 'imgs/18/P1040983-XL.jpg', 'imgs/18/P1040982-XL.jpg');

var path = 'mypath';

document.getElementById('slideShow').innerHTML = "<img width='600px' src='" + path + images[0] + "' />";  // Load First image
var i = 1;  // Set counter to the second image for the first iteration of the loop

setInterval("show_next(path)", 5000);

function show_next(path)
{
var container = document.getElementById('slideShow');
container.innerHTML = "<img width='600px' src='" + path + images[i] + "' />";
if(i === 4) { i = 0; } else { i = i + 1; }
}

How can you create a basic slideshow without relying on jQuery to cycle through images?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to manage numerous asynchronous post requests in AngularJS?

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

To give an element a class in Javascript (without using jQuery) if it is currently hidden

Attempting to parse the data within the success function consistently fails

Unable to run the method in the parent component from the child component

`Finding and including the additional object in JavaScript`

Incorporate my personalized icons into the button design of ionic 2 actionSheet

Spacing issues while utilizing the <textarea> element

"Utilizing jQuery to Send POST Requests on Rails - Dealing

Exploring the possibilities of socket.io-client in combination with Vite.js and Vue for seamless real

Effortless signing out using AJAX, Zend Framework, and jQuery

Issue with Checkbox Functionality Between Parent and Child Components in React.js

Exploring the effectiveness of React Hook Form using React Testing Library

Tips for keeping my wordpress menu at the forefront

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

Generate a series of rotations ranging from -60 to 60 using d3.cloud

Tips for clearing a textbox value in JQuery after a 5-second delay

The content loses functionality once I add an overlay color to the background image div

Is there a way to deactivate the ctrl and click event using jQuery UI?

Troubleshooting Vue 3 Computed Property Not Updating