JavaScript - periodically change “active” image
Question
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 answers
solution1
1 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.
solution2
0 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>
solution3
0 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 .
solution4
0 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.
solution5
0 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 :)
solution6
0 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.