We Keep Coding

Showing an element for 5 seconds, then hide and show next element

This is what I've tried so far, but it just shows all the elements at once:
i1 = document.getElementById('img_1');
i2 = document.getElementById('img_2');
i3 = document.getElementById('img_3');
i4 = document.getElementById('img_4');
i5 = document.getElementById('img_5');
myarr = [i1,i2,i3,i4,i5];
for (i=0; i<myarr.length;i++) {
$(myarr[i]).show().delay(5000).fadeOut();
}

I assume you are trying to achieve an endless loop.
I think you should use interval in that case, and do fadeOut/fadeIn of elements.
i1 = document.getElementById('img_1');
i2 = document.getElementById('img_2');
i3 = document.getElementById('img_3');
i4 = document.getElementById('img_4');
i5 = document.getElementById('img_5');
let myarr = [i1, i2, i3, i4, i5];
let active = 1;
setInterval(() => {
$(myarr[active - 1]).fadeOut(500)
if (active >= myarr.length) {
active = 0
}
setTimeout(() => {
$(myarr[active]).fadeIn(500);
active = active + 1;
}, 500)
}, 5000)
What this does, is updates elements every 5 sec to next element, if it reached the end, it resets it to zero.
Checkout this fiddle

You can use async and await.
Another this you can improve is that. You can add same class to all images you want to show in series. If you want to select all by id you can use Attribute Selectors.
const myarr = document.querySelectorAll('img[id^=img]');
I have used same class rather than id
const arr = [...document.querySelectorAll('.test')];
(async function(){
for (let i=0; i<arr.length;i++) {
await new Promise(res => {
setTimeout(() => {
$(arr[i]).show().fadeOut();
res();
},2000)
})
}
})()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">Test 1</div>
<div class="test">Test 2</div>
<div class="test">Test 3</div>

let count = 1;
setInterval(()=>{
document.querySelectorAll("*[id*='img_']").forEach((elem)=> elem.style.display="none");
document.getElementById(`img_${count}`).style.display="";
if(count<4) count++;
else count = 1;
},1000)
<div id="img_1">Image 1</div>
<div id="img_2" style="display:none">Image 2</div>
<div id="img_3" style="display:none">Image 3</div>
<div id="img_4" style="display:none">Image 4</div>
Vanilla Javascript solution!

You forgot to show your element after fadeOut. Here you can achieve it:
// show first element
$('img').eq(0).show();
$('img').each(function () {
// your delay
$('img').delay(5000).fadeOut();
// make sure next element is image
if ($(this).next()[0].tagName === 'IMG') {
// show next element
$(this).next().fadeIn();
}
});
img {
display: none;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://picsum.photos/id/5/50" />
<img src="https://picsum.photos/id/10/50" />
<img src="https://picsum.photos/id/30/50" />
<img src="https://picsum.photos/id/0/50" />
<img src="https://picsum.photos/id/150/50" />
<img src="https://picsum.photos/id/1000/50" />

var basicVal =0;
$(document).ready(function(){
$('.wrapper img').eq( basicVal ).show();
var setTime =setInterval(function(){
if( basicVal < $('.wrapper img').length - 1){
$('.wrapper img').eq(basicVal ).hide();
basicVal++;
$('.wrapper img').eq(basicVal).show();
}else{
clearTimeout(setTime);
}
console.log();
}, 5000);
});
.wrapper{
width: 100%;
float: left;
}
.wrapper img{
width: 50%;
height: 300px;
object-fit: cover;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="http://www.desktopwallpaperhd.net/wallpapers/0/4/landscapes-wallpaper-fengguangbizhi-fengjingbizhi-picture-image-1316.jpg" alt="">
<img src="http://trustbanksuriname.com/wp-content/uploads/2019/04/pony-picture-guide-to-native-pony-breeds-little-pony-cartoon-pictures.jpg" alt="">
<img src="https://www.bigfoto.com/stones-background.jpg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQulscf1nNOpaI1tElZgKTTSAl_ZcL_i1VwLDojgKzqjSTMofsqPw" alt="">
</div>
check this out I use some little bit of jquery and setInterval function to change in every 5000ms

You may use setTimeout for achieving this effect.
<div id="container">
<div class="block" id="img_1"></div>
<div class="block" id="img_2"></div>
<div class="block" id="img_3"></div>
<div class="block" id="img_4"></div>
<div class="block" id="img_5"></div>
</div>
.block{
width:100px;
height:100px;
display: inline-block;
margin:10px;
background: lightblue;
visibility: hidden;
}
And then,
$('.block').each(function(index, value) {
setTimeout(function() {
$(value).css("visibility", "visible");
$(value).show().delay(1000).fadeOut();
}, 2000 * (index + 1));
});

Target specific class with setInterval and function with jQuery

I've been working with a script to randomly toggle classes on a set of images. So far it works as intended, but the one thing I was wondering if there is a way to target a specific class since it appears to target the window and I'm not sure that the best way to go about it.
Here's what I have so far:
var counter = 0;
$('.images img').each(function(i) {
if (i == 0) {
counter = 0;
} else {
counter++;
}
if (counter < 5) {
$(this).addClass('show');
} else {
$(this).addClass('hide');
}
});
function shuffleRandomLogos(remove, add) {
const logo = $("." + remove).toArray();
const logoLength = logo.length;
const randomNum = Math.floor(Math.random() * logoLength);
const randomLogo = logo[randomNum];
$(randomLogo).removeClass(remove);
$(randomLogo).addClass(add);
}
window.setInterval(function() {
shuffleRandomLogos("show", "hide");
shuffleRandomLogos("hide", "show");
}, 600);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
</div>
I've tried to update const logo = $("."+remove).toArray(); to this:
const logo = $(".images img").toArray(); which works but then it starts to break out of first 5 to be shown and starts getting a little crazy.
So not sure what I need to adjust to just have it target the .images img or if there is a better way to go about it.
Here's a link to a demo (CodePen):
https://codepen.io/ultraloveninja/pen/gJRqPM

You don't need to add random classes at first, just call function manually and later in interval. Also remove all .show classes and add only to selected ones.
Also note that you should move preparation variables out of function for faster processing.
var logos, logosLength;
function makeImages(count)
{
for (var i = 0; i < count; i++) {
$('.images').append('<img src="https://via.placeholder.com/200x300.png?text=' + i + '">');
}
logos = $(".images img");
logosLength = logos.length;
}
function shuffleRandomLogos(count)
{
logos.removeClass('show');
for (var i = 0; i <= count; i++) {
let randomLogo = logos[Math.floor(Math.random() * (logosLength - 1))];
$(randomLogo).addClass('show');
}
}
makeImages(20);
shuffleRandomLogos(5);
window.setInterval(function () {
shuffleRandomLogos(5);
}, 600);
.images img {
display: none;
}
.images img.show {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
</div>

Image sequence plays and stops on scroll

This image sequence plays automatically but I want the first 7 images are played automatically and the remaining images (8 to 15) are played after one scroll.
How would I do this?
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0,
j = 0;
var interval = setInterval(function() {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
j++;
if (j === 14) {
clearInterval(interval);
document.getElementsByClassName("d-none")[0].classList.add('d-block');
}
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
.d-none {
display: none
}
.d-block {
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>
<div class="d-none">
this div is aappear
</div>

Slideshow not working

(Sorry if this question has rlly simple answer!!). Anyways I'm trying to make two slideshows on the one page. Only one ever shows though. As in although I've added all the code for the second one, only the first one is visible on the page.
I'm only allowed to keep the code basic, but can do whatever with the javascript if that's what is the problem.
The javascript. I'm not sure what it means (sorry again) but it works for the one banner
<!-- script for slideshow ((copied from http://www.w3schools.com/w3css/w3css_slideshow.asp!)) -->
<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";
setTimeout(carousel, 1000); <!-- time between slide change -->
}
</script>
The html code - for the second slideshow I copied the code between those two 'slideshow' notes into a different div (and changed the picture filenames)
<!--slideshow-->
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<!--END slideshow-->
This is the css (just the relevant container
specifications).
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.mySlides {
position: relative;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
width: 500px;
margin: auto;
border-radius: 25px;
}
Thank you in advance!!

If you copied the div with the same elements, and left the class names alone, then it makes sense that only one slideshow appears - but it should be a slideshow playing both sets of images (or duplicates, if the sets are the same). It's a somewhat simple fix. First, rename the class for the second set of images, so your HTML would be something like:
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<div class="slideshow-container">
<img class="mySlides2" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides2" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides2" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides2" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides2" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides2" src="images/2img6.jpg" alt="2img6.jpg">
</div>
Then you can basically double the code needed for one slideshow, and set it to use the class for the second set of images. Might be tough to picture in your head, but you may be able to see it here:
var xIndex = 0, yIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
var y = document.getElementsByClassName("mySlides2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < y.length; i++) {
y[i].style.display = "none";
}
xIndex++;
if (xIndex > x.length) {xIndex = 1}
x[xIndex-1].style.display = "block";
yIndex++;
if(yIndex > y.length) {yIndex = 1}
y[yIndex-1].style.display = "block";
setTimeout(carousel, 1000);
}
You can see I created a yIndex variable, and used y for .mySlides2 elements (instead of mySlides). I doubled the loop specifically for y instead of x, and incremented the yIndex in the same fashion as xIndex (same with setting it to one if it exceeds max number of images, and setting the next image to be displayed).
Here's a working Fiddle (well, working in a sense, the images are all broken, but the script works): https://jsfiddle.net/cchvncnd/

Great answer from #mark.hch.
However if you want stick with current Class. And let the function iterate it automatically, you may use this code, please review it
var myIndex = [];
carousel();
function carousel() {
var i, j;
var con = document.getElementsByClassName("slideshow-container");
for (j = 0; j < con.length; j++) {
myIndex[j] = myIndex[j] || 0;
for (i = 0; i < con[j].children.length; i++) {
con[j].children[i].style.display = "none";
}
if (myIndex[j] >= con[j].children.length) {
myIndex[j] = 0;
}
con[j].children[myIndex[j]].style.display = "block";
myIndex[j] ++;
}
setTimeout(carousel, 1000); <!-- time between slide change -->
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
display: inline-block;
height: 200px;
width: 500px;
border: 1px solid green;
}
.mySlides {
position: relative;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
border-radius: 25px;
}
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<div class="slideshow-container">
<img class="mySlides" src="images/1img1.jpg" alt="1img1.jpg">
<img class="mySlides" src="images/1img2.jpg" alt="1img2.jpg">
<img class="mySlides" src="images/1img3.jpg" alt="1img3.jpg">
<img class="mySlides" src="images/1img4.jpg" alt="1img4.jpg">
<img class="mySlides" src="images/1img5.jpg" alt="1img5.jpg">
<img class="mySlides" src="images/1img6.jpg" alt="1img6.jpg">
</div>

hide next button when last element reaches

I am creating a simple gallery with an overlay to display enlarged image when clicked.
In my gallery, every 3 images are grouped into a container as
<div class='overlay'>
<a class='next control'>Next</a>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image1"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image2" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image3"/>
</div>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image4"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image5" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image6"/>
</div>
</div>
JQuery
$(document).ready(function () {
var src;
var currentElement;
$(".image").click(function () {
currentElement = $(this);
src = $(currentElement).find("img").attr("src");
$(".overlay").css("background-image", "url('" + src + "')");
$(".overlay").show();
});
$(".next").click(function () {
if ($(currentElement).next().length) {
currentElement = currentElement.next();
src = $(currentElement).find("img").attr("src");
}
else {
currentElement = $(currentElement).parent().next().find(".image:first");
src = $(currentElement).find("img").attr("src");
}
$(".overlay").css("background-image", "url('" + src + "')");
});
});
I am able to get the next image on clicking next. But my problem is How to disable the next button when last image reaches ?.
I am unable to find a logic to get the last image.
Note: the images in last container may vary from 1 to 3
Here is the demo : https://jsfiddle.net/y5fwgz25/1/

here is my solution but i do not like this code, but works fine
<div class='overlay'>
<a class='next'></a>
</div>
<div id="gallery">
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image1"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image2" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image3"/>
</div>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image4"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image5" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image6"/>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var src;
var currentElement;
var last_img = $("#gallery .container:last-child .image:last-child");
$(".image").click(function () {
currentElement = $(this);
src = $(currentElement).find("img").attr("src");
$(".overlay").css("background-image", "url('" + src + "')");
$(".overlay").show();
if ( $(currentElement)[0] == $(last_img)[0] ) {
$(".overlay .next").hide();
}
});
$(".next").click(function () {
if ( $(currentElement).next()[0] == $(last_img)[0] ) {
$(".overlay .next").hide();
}
if ($(currentElement).next().length) {
currentElement = currentElement.next();
src = $(currentElement).find("img").attr("src");
}else {
currentElement = $(currentElement).parent().next().find(".image:first");
src = $(currentElement).find("img").attr("src");
}
$(".overlay").css("background-image", "url('" + src + "')");
});
});
</script>

why don't you use jquery last method to get the last sibling and compare any of its attributes with the same attributes of the current element.
If they are the same, hide or disable the next button.

You can add one if condition. If the length of currentElement is zero then hide .next.
Updated Fiddle-
$(document).ready(function () {
var src;
var currentElement;
$(".image").click(function () {
currentElement = $(this);
src = $(currentElement).find("img").attr("src");
$(".overlay").css("background-image", "url('" + src + "')");
$(".overlay").show();
});
$(".next").click(function () {
if ($(currentElement).next().length) {
currentElement = currentElement.next();
src = $(currentElement).find("img").attr("src");
}
else {
currentElement = $(currentElement).parent().next().find(".image:first");
src = $(currentElement).find("img").attr("src");
}
if($(currentElement).length==0) {
$(".next").hide();
}
$(".overlay").css("background-image", "url('" + src + "')");
});
});
.overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9) no-repeat;
background-position: center;
}
.next {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
background-image: url("http://dummyimage.com/50&text=Next");
right: 8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay'>
<a class='next'></a>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image1"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image2" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image3"/>
</div>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image4"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image5" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image6"/>
</div>
</div>