<img src="http://localhost/wp-content/uploads/2018/01/sample-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84bdg" style="display:block">
<img src="http://localhost/wp-content/uploads/2018/05/poqn-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84xjz">
<img src="http://localhost/wp-content/uploads/2018/05/kpth-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84yrh">
<img src="http://localhost/wp-content/uploads/2018/05/dtyh-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84gpl">
<img src="http://localhost/wp-content/uploads/2018/05/gymr-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84dzo">
Is there anymethod to rotate thumbnails on mouse hover every second with javascript like many video tube sites?
I have a video gallery and I have multiple thumbs option but I dont know if its possible to change every second the images listed above.
Here is a possible solution :
var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img").map(function () {
return $(this).attr("src");
}).get();
$("img:gt(0)").remove();
$("img").hover(function () {
var $this = $(this);
tid = setInterval(function () {
i = (i + 1) % images.length;
$this.attr("src", images[i]);
}, 1000 * sec);
}, function () {
clearInterval(tid);
$(this).attr("src", images[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
As an alternative, you could switch between a static GIF and an animated GIF :
var gif = "https://i.stack.imgur.com/1IpaB.gif";
var agif = "https://i.stack.imgur.com/yYrPT.gif";
$("img").hover(function () {
$(this).attr("src", agif);
}, function () {
$(this).attr("src", gif);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="150" src="https://i.stack.imgur.com/1IpaB.gif">
To make the GIF that you can see in the above code snippet, I have converted a WEBP image from Youtube thanks to this online tool : https://ezgif.com/webp-to-gif.
You can do it like following...
<style type="text/css">
.mvThumbs {
position: relative;
}
.mvThumbs .mvThumb {
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="mvThumbs">
<img src="http://lorempixel.com/400/200/sports/1/" class="mvThumb" alt="" title="" id="thumb_i84bdg">
<img src="http://lorempixel.com/400/200/sports/2/" class="mvThumb" alt="" title="" id="thumb_i84xjz">
<img src="http://lorempixel.com/400/200/sports/3/" class="mvThumb" alt="" title="" id="thumb_i84yrh">
</div>
<script type="text/javascript">
$('.mvThumbs img:gt(0)').hide();
$(".mvThumbs").hover(function() {
window.timer = setInterval(function() {
$('.mvThumbs :first-child').fadeOut().next('img').fadeIn().end().appendTo('.mvThumbs');
}, 1000);
}, function() {
clearInterval(window.timer);
});
</script>
Use a setInterval that gets added on mouseenter and cleared on mouseleave, something like this:
let hoverInterval;
let visibleIndex = 0;
const container = document.querySelector('#container');
container.addEventListener('mouseover', () => {
hoverInterval = setInterval(() => {
container.children[visibleIndex].style.display = 'none';
visibleIndex++;
container.children[visibleIndex].style.display = 'block';
}, 1000);
});
container.addEventListener('mouseleave', () => clearInterval(hoverInterval));
<div id="container">
<img src="http://localhost/wp-content/uploads/2018/01/sample-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84bdg" style="display:block">
<img src="http://localhost/wp-content/uploads/2018/05/poqn-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84xjz" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/kpth-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84yrh" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/dtyh-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84gpl" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/gymr-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84dzo" style="display:none">
</div>
Related
im trying to build a website, where u click on a text, and a picture appears, when you click on this picture, the next one appears and so on. If you reach the last picture, the first one should appear if you click on it. My code is very complicated and it does not work with the last picture. I hope somebody can help me!
<head>
<script type="text/javascript">
function showImage() {
document.getElementById('loadingimage').style.visibility="visible";
}
function showImage2() {
document.getElementById('loadingimage2').style.visibility="visible";
}
function showImage3() {
document.getElementById('loadingimage3').style.visibility="visible";
}
</script>
</head>
<body>
<a onclick="showImage()">Hier clicken</a>
<img onclick="showImage2()" id="loadingimage" src="pic/pic1.jpg" alt="" style="visibility:hidden"></img>
<img onclick="showImage3()" id="loadingimage2" src="pic/pic2.jpg" alt="" style="visibility:hidden"></img>
<img onclick="showImage4()" id="loadingimage3" src="pic/pic3.jpg" alt="" style="visibility:hidden"></img>
</body>
For simplicity, the button will be hidden after you click the first time on the button.
let start = 0,
total = 3,
hasStarted = false;
const images = [...document.querySelectorAll(".image")];
const button = document.querySelector("button");
function showImage() {
if (!hasStarted) {
button.classList.add("hide")
hasStarted = !hasStarted;
}
images.forEach(image => {
if (image.classList.contains("show")) {
image.classList.remove("show");
image.classList.add("hide");
}
})
document.querySelector(`.image${start}`).classList.add("show");
++start;
start = start % total;
}
images.forEach(image => {
image.addEventListener("click", showImage)
})
.hide {
visibility: hidden;
}
.show {
visibility: visible;
}
<button onclick="showImage()">Hier clicken</button>
<img class="image image0 hide" id="loadingimage1" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image1 hide" id="loadingimage2" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image2 hide" id="loadingimage3" src="https://source.unsplash.com/random/200x200" alt=""></img>
I feel this is what you need:
<head>
<script type="text/javascript">
function showImage() {
document.getElementById('loadingimage').style.visibility = "visible";
document.getElementById('loadingimage').style.position = 'absolute';
}
function showImage2() {
document.getElementById('loadingimage2').style.visibility = "visible";
document.getElementById('loadingimage2').style.zIndex = '10';
document.getElementById('loadingimage2').style.position = 'absolute'
}
function showImage3() {
document.getElementById('loadingimage3').style.visibility = "visible";
document.getElementById('loadingimage3').style.zIndex = '15';
document.getElementById('loadingimage3').style.position = 'absolute'
}
function showImage4() {
document.getElementById('loadingimage').style.zIndex = '20';
}
</script>
</head>
<body>
<a onclick="showImage()">Hier clicken</a>
<img onclick="showImage2()" id="loadingimage" src="https://source.unsplash.com/random/200x201" alt="" style="visibility:hidden">
<img onclick="showImage3()" id="loadingimage2" src="https://source.unsplash.com/random/200x202" alt="" style="visibility:hidden">
<img onclick="showImage4()" id="loadingimage3" src="https://source.unsplash.com/random/200x203" alt="" style="visibility:hidden">
</body>
I put together this very simple jQuery code to animate a sequence of images. It works perfectly. you can view it here.
But now I am trying to update the code so it could work on multiple image sequences at once as long as it has its own class that is referenced in the jQuery code. So I updated it - view below. Unfortunately my updates are not working. Can you guys help me resolve this issue? Thank you in advance!
let aniOne = $(".animation.first img");
let aniTwo = $(".animation.second img");
let currentImg = 0;
function changeImg(allImg){
$(allImg[currentImg]).fadeOut(0, function(){
if(currentImg == allImg.length -1){
currentImg = 0;
}else {
currentImg++;
}
$(allImg[currentImg]).fadeIn(0)});
}
setInterval(changeImg(aniOne), 0050);
setInterval(changeImg(aniTwo), 0050);
.animation {
width: 30%;
}
.animation img {
display: none;
}
.animation img:first-of-type {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animation first">
<img src="http://s23.postimage.org/t57meexkb/horse_1.png">
<img src="http://s23.postimage.org/i86apnasr/horse_2.png">
<img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png">
<img src="http://s23.postimage.org/w4ej1j71n/horse_4.png">
<img src="http://s23.postimage.org/ddclrdch7/horse_5.png">
<img src="http://s23.postimage.org/nbxkdulwr/horse_6.png">
<img src="http://s23.postimage.org/phrv8cpd7/horse_7.png">
<img src="http://s23.postimage.org/n1un88wob/horse_8.png">
<img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png">
<img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png">
<img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png">
<img src="http://s23.postimage.org/bhuetyd0r/horse_12.png">
<img src="http://s23.postimage.org/imc82zka3/horse_13.png">
<img src="http://s23.postimage.org/auvi4fg4r/horse_14.png">
</div>
<div class="animation second">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/i1oLaES.png">
</div>
As Chris G stated above:
The working code uses setInterval(changeImg, 50) which will work fine. The problem with your current attempt is setInterval(changeImg(aniOne), 50) which evaluates to a call to changeImg(aniOne), then a call to setInterval(undefined, 50) (since changeImg doesn't return anything). If you want this to work, you need to make changeImg into a function that returns a function. – Chris G
After we add these problems, we then have the issue of both animations sharing the currentImg variable, so instead I made two different variables and passed them along with the images. You can handle this many different ways.
let aniOne = $(".animation.first img");
let aniTwo = $(".animation.second img");
let num1 = 0;
let num2 = 0;
function changeImg(allImg, num){
function main(){
$(allImg[num]).fadeOut(0, function(){
if(num == allImg.length -1){
num = 0;
}else {
num++;
}
$(allImg[num]).fadeIn(0)});
}
return main;
}
setInterval(changeImg(aniOne, num1), 0050);
setInterval(changeImg(aniTwo, num2), 0050);
.animation {
width: 30%;
}
.animation img {
display: none;
}
.animation img:first-of-type {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animation first">
<img src="http://s23.postimage.org/t57meexkb/horse_1.png">
<img src="http://s23.postimage.org/i86apnasr/horse_2.png">
<img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png">
<img src="http://s23.postimage.org/w4ej1j71n/horse_4.png">
<img src="http://s23.postimage.org/ddclrdch7/horse_5.png">
<img src="http://s23.postimage.org/nbxkdulwr/horse_6.png">
<img src="http://s23.postimage.org/phrv8cpd7/horse_7.png">
<img src="http://s23.postimage.org/n1un88wob/horse_8.png">
<img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png">
<img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png">
<img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png">
<img src="http://s23.postimage.org/bhuetyd0r/horse_12.png">
<img src="http://s23.postimage.org/imc82zka3/horse_13.png">
<img src="http://s23.postimage.org/auvi4fg4r/horse_14.png">
</div>
<div class="animation second">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/i1oLaES.png">
</div>
I'm trying to display images from a folder, But when the image does not exist. I want it to skip to the next one. I'm using 'display none' here.
Below is the code.
Thanks in Advance.
Sorry if there's any mistake.
<div class="w3-content w3-section" style="position:fixed; height: 100%; width:100%;">
<img class="mySlides" src="uploads/1.JPG" align="middle" >
<img class="mySlides" src="uploads/2.JPG" align="middle">
<img class="mySlides" src="uploads/3.JPG" align="middle">
<img class="mySlides" src="uploads/4.JPG" align="middle">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block"; //For Eg if 1.JPG is not found it displays black screen for 5secs.
setTimeout(carousel, 5000); // Change image every 5 seconds
}
</script>
Add attribute onerror in every img tag
<div class="w3-content w3-section" style="position:fixed; height: 100%; width:100%;">
<img class="mySlides" src="uploads/1.JPG" onerror="this.remove()" align="middle" >
<img class="mySlides" src="uploads/2.JPG" onerror="this.remove()" align="middle">
<img class="mySlides" src="uploads/3.JPG" onerror="this.remove()" align="middle">
<img class="mySlides" src="uploads/4.JPG" onerror="this.remove()" align="middle">
</div>
Hope it'll help you out.
below is my code,In this 1 to 15 image and this image load one by one to 15 and again start from 1 to 15 in specific time interval. In this sequence images play infinitely when page is load but i want images play at only once when page is load.
and I can't fixed this bug please help me out to solve this problem.
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
<div id="animation">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png">
</div>
#pratik, this should help you:
You should use clearInterval like below:
if(j === 15) {
clearInterval(interval);
}
Example
onload = function startAnimation() {
var animDiv = document.getElementById('animation');
var x = document.createElement("IMG");
x.setAttribute("id", 'test');
x.setAttribute("src",
"http://jumpingfishes.com/dancingpurpleunicorns/charging01.png");
animDiv.appendChild(x);
var i = 1,
j = 2;
var interval = setInterval(function () {
var y = (i < 10) ? '0' + i.toString() : i.toString(),
z = (j < 10) ? '0' + j.toString() : j.toString(),
url = document.getElementById('test').src;
document.getElementById('test').src = url.replace(y, z);
i++;
j++;
if (j === 16) {
clearInterval(interval);
}
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
<div id="animation">
</div>
You should use clearInterval();
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
var myInterval=setInterval(function () {
if(i==frameCount-2){
clearInterval(myInterval);
}
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
<div id="animation">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
You have to clear your interval once you want it to stop running. Using clearInterval().
Check this example:
Note that intervalEnd is the number that once the i reaches it, will clear your interval.
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
var intervalEnd = 100;
var intervalId = setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
if (i >= intervalEnd)
clearInterval(intervalId)
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
<div id="animation">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
I'm doing a frame by frame animation with Javascript by animating a sequence of images.
The code for the animation is quite simple.
My problem is, there can be a lot of images, presently 200 but can be up to 1000. Loading the images simultanely can take some times. I'd like to play the animation with 30 images initially and preload the remain in the background. But sometimes, the images take a time to load thus breaking the animation.
How can I pause the animation with a "buffering" and continue the animation when the next image is available ? Also how to skip the preloading when the images are already cached ? Could use some suggestion to improve the code.
HTML
<div class="video-stream">
<img alt="" src="images/stream/Calque-120.jpg" />
<img alt="" src="images/stream/Calque-121.jpg" />
<img alt="" src="images/stream/Calque-122.jpg" />
<img alt="" src="images/stream/Calque-123.jpg" />
<img alt="" src="images/stream/Calque-124.jpg" />
<img alt="" src="images/stream/Calque-125.jpg" />
<img alt="" src="images/stream/Calque-126.jpg" />
<img alt="" src="images/stream/Calque-127.jpg" />
<img alt="" src="images/stream/Calque-128.jpg" />
<img alt="" src="images/stream/Calque-129.jpg" />
<img alt="" src="images/stream/Calque-130.jpg" />
<img alt="" src="images/stream/Calque-131.jpg" />
<img alt="" src="images/stream/Calque-132.jpg" />
<img alt="" src="images/stream/Calque-133.jpg" />
<img alt="" src="images/stream/Calque-134.jpg" />
<img alt="" src="images/stream/Calque-135.jpg" />
<img alt="" src="images/stream/Calque-136.jpg" />
<img alt="" src="images/stream/Calque-137.jpg" />
<img alt="" src="images/stream/Calque-138.jpg" />
<img alt="" src="images/stream/Calque-139.jpg" />
<img alt="" src="images/stream/Calque-140.jpg" />
<img alt="" src="images/stream/Calque-141.jpg" />
<img alt="" src="images/stream/Calque-142.jpg" />
<img alt="" src="images/stream/Calque-143.jpg" />
<img alt="" src="images/stream/Calque-144.jpg" />
<img alt="" src="images/stream/Calque-145.jpg" />
<img alt="" src="images/stream/Calque-146.jpg" />
<img alt="" src="images/stream/Calque-147.jpg" />
<img alt="" src="images/stream/Calque-148.jpg" />
<img alt="" src="images/stream/Calque-149.jpg" />
</div>
CSS
.video-stream
{
position: relative;
}
.video-stream img
{
display: none;
height: auto;
left: 0;
max-width: 100%;
position: absolute;
top: 0;
vertical-align: top;
}
Javascript
var current = 0, // current playing image index
next = 1, // next image index to play
interval = 60, // animation speed
hide_delay = 1, // Delay to hide the current image
img_num = 200, // Total number of image
pack = 10, // Images being preloaded simultanely
idx_start = 149, // The images are index-suffixed so this is the index of the first image to preload
idx_end = 300; // index of the last image in the sequence
var load_more = function()
{
if(idx_start < idx_end)
{
// Preloading images
var temp = [],
temp_html = '';
for(var i = 0; i < pack && idx_start < idx_end; i++)
{
temp[i] = 'images/stream/Calque-' + (++idx_start) + '.jpg';
}
preloadPictures(temp, function()
{
$.each(temp, function(i, v)
{
temp_html += '<img src=' + v + ' />';
});
// Inject into dom
$('.video-stream').append(temp_html);
});
}
}
var play_stream = function()
{
$('.video-stream').find('img').eq(current).delay(interval).fadeOut(hide_delay)
.end().eq(next).delay(interval).hide().fadeIn(hide_delay, play_stream);
if(next < img_num - 1)
{
next++;
}
else
{
next = 0;
}
if(current < img_num - 1)
{
current++;
}
else
{
current = 0;
}
// Background preload
if(idx_start < idx_end)
{
load_more();
}
};
$(window).load(function()
{
play_stream();
});
This is a tricky way of doing it but here it is. You just need an array of images to pass through instead of my count;
var count = 0;
var buffer = 1;
var Vbuffer = 2;
setInterval(function() {
$('#img .' + buffer).prop('src', 'https://placeholdit.imgix.net/~text?txtsize=33&txt=' + count + '&w=150&h=150');
buffer = buffer % 3 + 1;
$('#img img').not('.' + Vbuffer).hide();
$('#img .' + Vbuffer).show();
Vbuffer = Vbuffer % 3 + 1;
count++;
}, 1000);
var buffer2 = 1;
var Vbuffer2 = 2;
var arrayOfImg = ['https://placeholdit.imgix.net/~text?txtsize=33&txt=one&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=two&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=three&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=four&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=five&w=150&h=150'
]
var count2 = 0;
var arrayCount = arrayOfImg.length;
setInterval(function() {
$('#img2 .' + buffer2).prop('src', arrayOfImg[count2]);
buffer2 = buffer2 % 3 + 1;
$('#img2 img').not('.' + Vbuffer2).hide();
$('#img2 .' + Vbuffer2).show();
Vbuffer2 = Vbuffer2 % 3 + 1;
count2 = (count2 + 1) % arrayCount;
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
wait 3 seconds while the buffer loads
<div id='img'>
<img src='' class='1' />
<img src='' class='2' />
<img src='' class='3' />
</div>
<div id='img2'>
<img src='' class='1' />
<img src='' class='2' />
<img src='' class='3' />
</div>
EDIT
Added arrays to the results, so you can pass in an array of img sources to role through.