By Mira135


2018-10-11 14:04:22 8 Comments

I have 4 pictures and want them to periodically change class (I have .active class, which is similar to hover).

.active,
.pic:hover{
    position: absolute;
    border: 1px solid black;
    transform: scale(1.1);
    transition: transform .2s;
}

Basically I need the first picture to have the class active and after some time change it so the next picture has the class and the first one lose it. Is something like that even possible?

Picture in HTML:

<div class="products">
    <a href="http://example.com/produkt1">
        <img class="pic" src="image.jpg" alt="image" width="75" height="75"> 
    </a>
</div>

and JS:

productIndex = 0;
slideshow();
function slideshow(){

    var i;
    var pic = document.getElementsByClassName("pic");

    for(i = 0; i < pic.length; i++){
        pic[i].className = pic[i].className.replace("active", "");
    }
    productIndex++;
    if(productIndex > pic.length){
        productIndex = 1;
    }
    pic[productIndex-1].className += active;

    setInterval(slideshow, 2000);
}

6 comments

@Wais Kamal 2018-10-11 14:24:22

Yes it is possible:

function carousel() {
  var images = document.querySelectorAll(".container img");
  for(var i = 0; i < images.length; i++) {
    if(images[i].classList.contains("active")) {
      images[i].classList.remove("active");
      if(i == images.length - 1) {
        images[0].classList.add("active");
      } else {
        images[i + 1].classList.add("active");
      }
      break;
    }
  }
}

setInterval(carousel,1000);
img {
  width:       100px;
  margin-left: 10px;
  transition:  .2s;
}

.active {
  transform: scale(1.1);
}
<div class="container">
  <img src="https://i.stack.imgur.com/cb20A.png" class="active"/>
  <img src="https://i.stack.imgur.com/cb20A.png"/>
  <img src="https://i.stack.imgur.com/cb20A.png"/>
  <img src="https://i.stack.imgur.com/cb20A.png"/>
</div>

You can then replace the .active class by whatever you want.

@C.RaysOfTheSun 2018-10-11 14:30:39

Checkout this working example. I've made use of a combination of setInterval and setTimeout.

$(window).ready(()=>{
  // get all the images inside the image-container div
  let $images = $('.image-container').find('.image');
  let currImage = 0;
  // execute this code every 2 seconds
  window.setInterval(()=>{
    // add the active class to the current image
    $($images[currImage]).addClass('active');
    setTimeout(()=>{
      // execute the code here after 1.5 seconds
      // remove the active class from the previous image
      $($images[currImage-1]).removeClass('active');
    }, 1500);
    // make sure we don't go over the number of elements in the collection
    currImage = currImage >= $images.length ? 0 : currImage + 1;
  }, 2000);
});
.image.active {
  border: thin solid blue;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<div class="image-container" class="">
  <img src="https://via.placeholder.com/200x200" class="image active">
    <img src="https://via.placeholder.com/200x200" class="image">
    <img src="https://via.placeholder.com/200x200" class="image">
    <img src="https://via.placeholder.com/200x200" class="image">
</div>

Do make sure that the code in setTimeout will execute before the next interval. Meaning, the time set for setTimeout is always less than setInterval's :)

@epanalepsis 2018-10-11 14:32:03

You could do it like this for example:

$(document).ready(function() {
  setInterval(function() {
    var active = $('.active');
    active.nextOrFirst().addClass('active');
    active.removeClass('active');
  }, 3000);
});

$.fn.nextOrFirst = function(selector)
{
  var next = this.next(selector);
  return (next.length) ? next : this.prevAll(selector).last();
};
.active,
.pic:hover{
    border: 1px solid black;
}
.pic {
    width: 150px;
    margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-container">
  <img class="pic active" src="https://via.placeholder.com/350x150">
  <img class="pic" src="https://via.placeholder.com/350x150">
  <img class="pic" src="https://via.placeholder.com/350x150">
  <img class="pic" src="https://via.placeholder.com/350x150">
</div>

Edit: This, instead of most other solutions, will work with any amount of items. To use it only on pictures just specify via selector in the function.

@jkan5855 2018-10-11 14:22:30

Matt L. has a good point here. Your code has the setInterval inside your slideshow function, otherwise it's fine.

productIndex = 0;
slideshow();
function slideshow(){

    var i;
    var pic = document.getElementsByClassName("pic");

    for(i = 0; i < pic.length; i++){
        pic[i].className = pic[i].className.replace("active", "");
    }
    productIndex++;
    if(productIndex > pic.length){
        productIndex = 1;
    }
    pic[productIndex-1].className += active;
}

setInterval(slideshow, 2000);

could probably work. Matt's answer is a lot better, and I came up with something similar, which is testable on jsfiddle.

@Matt L. 2018-10-11 14:15:39

You can use setInterval to run a function periodically that will change the active class. Something like this (psuedo-code):

var imageArray = [];
var activeIndex = 0;

setInterval(function(){
    imageArray[activeIndex].removeClass('active');
    activeIndex++;
    activeIndex %= 4;
    imageArray[activeIndex].addClass('active');
}, 5000);

The number value passed in as a parameter is how many milliseconds to wait before running the function again. In this example, 5 seconds will pass between the classes are changed.

setInterval Reference

@jremi 2018-10-11 14:20:57

This is ugly but it could work for super basic ... You just need to update the div blocks with images if necessary. Uses jquery...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <style>
  div {
    width:50px;
    height:50px;
    background-color: black;
    margin-bottom:10px;
  }
  .active {
    background-color: red;
  }
  </style>
</head>
<body>
  <div id="pic1"></div>
  <div id="pic2"></div>
  <div id="pic3"></div>
  <div id="pic4"></div>
  <script>
  let lastActive = 0;
setInterval(()=>{
  $('div').removeClass('active');
  if(lastActive === 0){
    $('#pic1').addClass('active');
    lastActive = 1;
  }
  else if(lastActive === 1){
    $('#pic2').addClass('active');
    lastActive = 2;
  }
  else if(lastActive === 2){
    $('#pic3').addClass('active');
    lastActive = 3;
  }
  else if(lastActive === 3){
    $('#pic3').addClass('active');
    lastActive = 4;
  }
  else if(lastActive === 4){
    $('#pic1').addClass('active');
    lastActive = 1;
  }
}, 500)
  </script>
</body>
</html>

@jremi 2018-10-11 14:24:36

Related Questions

Sponsored Content

37 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

69 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5306330 View
  • 6612 Score
  • 69 Answer
  • Tags:   javascript arrays

33 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

25 Answered Questions

52 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

25 Answered Questions

[SOLVED] Change an element's class with JavaScript

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2225386 View
  • 2395 Score
  • 25 Answer
  • Tags:   javascript html dom

50 Answered Questions

48 Answered Questions

Sponsored Content