Slide Show using JS array - javascript

The image is not get loaded by this code any improvement needed?
image url is stored into array for accessing that we required something?
<script>
var images = ["lap2.png", "lap1.png", "tv1.png", "tv2.png"];
var i;
function slides() {
for (i = 0; i < 4; i++) {
setInterval(function() {
document.getElementById('slider').src = "" + images[i];
}, 8000);
}
}
</script>
<!--HTML CODE-->
<p id="slide"><img src="lap1.png" id="slider" onload="this.onload=null;
this.src=slides();" multiple>
</p>

var images = ["1.png", "2.png", "3.png", "4.png"];
let i=0;
setInterval(function() {
i = i < images.length -1 ? i + 1 : 0;
document.getElementById('slide').src = `http://placehold.it/300x150?text=${images[i]}`;
}, 1000);
<img id="slide" src="http://placehold.it/300x150?text=1.png"></img>

Related

Slow down image cycle rotation to eventual random stop

I have a list of images that the code cycles through and displays indefinitely.
I want it to slow down and stop on a random image in the list.
Can anyone help me with this?
This is what I have so far:
<div id="imgSelect" class="imgSelect">
<div id="img" class="img">
<img id="imgDisplay" class="imgInside" imgalt="rArrowback">
</div>
<div id="select" class="select">
<button id="selectBtn" type="button" class="btnSelect">GO!</button>
</div>
</div>
The funtion:
var imgArray = new Array();
for (var i = 0; i < 60; i++) {
imgArray[i] = './imgs/' + i + '.png';
}
document.getElementById("imgDisplay").style.backgroundImage = "url('qm.png')"
function selectImg() {
document.getElementById("imgDisplay").style.backgroundImage = 'none'
var rotator = document.getElementById("imgDisplay");
var delayInSeconds = 1;
var num = 0;
var changeImage = function () {
var len = imgArray.length;
rotator.src = imgArray[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 100);
// for (var i = 0; i < 60; i++) {
// document.getElementById("imgDisplay").style.backgroundImage = "url('" + imgArray[i] + "')"
// }
}
This is the result:
Use the random function offered by Javascript.
Right after the timer put rotator.src = imgArray[Math.floor(Math.random() * imgArray.length)];

Update existing pages with URL on click image

The following images are advertisement banners and I want to add a clickable out link on each image as it displays.
var list = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg",
"image5.jpg",
"image6.jpg",
"image7.jpg",
"image8.jpg",
"image9.jpg",
"image10.jpg",
"image12.jpg",
"image13.jpg"
];
var index = 0;
function changeImgs() {
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('image1');
image.src = list[index];
}
setInterval(function() {
changeImgs()
}, 2000);
window.onload = changeimgs;
<center>
<img id="image1" src="image1.jpg">
</center>
You can put the image inside an a (link) tag and update its href each time you change the image.
<center>
<a id="imgLink" href="image1.jpg"><img id="image1" src="image1.jpg"></a>
</center>
<script>
function changeImgs() {
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('image1');
image.src = list[index];
document.getElementById("imgLink").href = list[index];
}
</script>

for(){} and setInterval() doesn't work

I want to picture 5s change next picture, but I can't make this work.
<div class="g-carousel" id="m-carousel">
<img src="imag/banner1.jpg" >
<img src="imag/banner2.jpg" >
<img src="imag/banner3.jpg" >
<div class="button">
<i class="checked"></i><i></i><i></i>
</div>
</div>
<script type="text/javascript">
function showpic() {
var carousel = document.getElementById("m-carousel")
var pciture = carousel.getElementsByClassName("pciture");
for (var i=0 ; i < pciture.length; i++)
if (i>2) i=0;
pciture[i].style.display="none";
pciture[i+1].style.display="block";
}
window.onload=function function_name(argument) {
setInterval("showpic()",5000);
}
</script>
Working jsfiddle
function showpic() {
var carousel = document.getElementById("m-carousel");
var carouselLength = carousel.getElementsByTagName("a").length;
var pciture = carousel.getElementsByClassName("pciture");
if (i>=carouselLength-1){
pciture[i].style.display="none";
i=0;
pciture[i].style.display="block";
i--;
}else{
pciture[i].style.display="none";
pciture[i+1].style.display="block";
}
i++;
}
var i = 0;
setInterval(showpic,2000);
You need to have a global counter:
var counter = 0;
function showpic() {
var carousel = document.getElementById("m-carousel")
var pciture = carousel.getElementsByClassName("pciture");
// Hide all the pictures.
for (var i=0 ; i < pciture.length; i++)
{
pciture[i].style.display="none";
}
// Show the picture based on the counter.
pciture[counter].style.display="block";
// Increment the counter ready for next time.
counter++;
// Check if the counter needs to loop back.
if(counter >= pciture.length)
counter = 0;
}
window.onload = function() {
setInterval(showpic, 5000);
}
Here is a working example
Maybe it would help if you change
window.onload=function function_name(argument) {
to
window.onload=function(argument) {
Hope that helps.
Regards
P.S. Live long and prosper :-)

Add captions to very basic jquery carousel

I've seen this very simple jquery styled carousel on another thread and think it would be ideal for a project I'm doing but wondering how it could be adapted to include captions on the images?
<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "image_1.png";
path[1] = "image_2.png";
path[2] = "image_3.png";
function swapImage() { document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",2000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="image_1.gif" width="400" />
Any help or suggestions without having to overhaul the carousel would be greatly appreciated!
<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = {img: "image_1.png", sub: "subtitle 1"};
path[1] = {img: "image_2.png", sub: "subtitle 2"};
path[2] = {img: "image_3.png", sub: "subtitle 3"};
function swapImage() {
document.slide.src = path[i].img;
document.subtitle.innerHTML = path[i].sub;
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",2000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="image_1.gif" width="400" />
<p name="subtitle"></p>
It's very simple, sample below, also notice, that demo uses setInterval instead of setTimeout
var i = 0;
var path = new Array();
// LIST OF IMAGES
path[0] = "http://lorempixel.com/400/200/sports/1";
path[1] = "http://lorempixel.com/400/200/sports/2";
path[2] = "http://lorempixel.com/400/200/sports/3";
function swapImage() {
document.slide.src = path[i];
// for the sake of example, we show urls of pictures
document.querySelector('#slide_caption').textContent = path[i];
if (i < path.length - 1) {
i++;
} else {
i = 0;
}
}
setInterval(swapImage, 2000);
window.onload = swapImage;
<h3 id="slide_caption"></h3>
<img height="200" name="slide" width="400" />

How do I cycle through pictures in JavaScript?

My html:
<img src="C:\Users\Shady\Downloads\restaurant\food1.jpg" alt="rotating image" width="400" height="300" id="rotator">
My Javascript:
<script type="text/javascript">
(function() {
var rotator = document.getElementById('rotator');
var imageDir = 'C:\\Users\\Shady\\Downloads\\restaurant\\';
var delayInSeconds = 5;
var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];
var num = 0;
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
})();
</script>
Everything makes sense to me but for some reason it is not working. It is only showing the first picture (doesn't cycle through the pictures). Please let me know if you need anything else. Thank you.
you are getting element 'rotator' before document is loaded so it doesn't exist.
Try this:
function start() {
var rotator = document.getElementById('rotator');
var imageDir = 'C:\\Users\\Shady\\Downloads\\restaurant\\';
var delayInSeconds = 1;
var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];
var num = 0;
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
};
window.onload=function(){
start();
}
Preload the images:
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "firstcar.gif" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "secondcar.gif"
slideimages[2] = new Image()
slideimages[2].src = "thirdcar.gif"
</script>
Display the first image:
<img src="firstcar.gif" id="slide" width="100" height="56" />
Create the slideshow(cycle):
<script type="text/javascript">
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script>
This is how you can try...it works fine for me....
<html>
<body>
<img src="file:///C:/Users/Public/Pictures/Sample%20Pictures/test1 (2).jpg" alt="rotating image" width="400" height="300" id="rotator">
<script type="text/javascript">
(function() {
var rotator = document.getElementById('rotator');
var imageDir = 'file:///C:/Users/Public/Pictures/Sample%20Pictures/';
var delayInSeconds = 5;
var images = ['test1.jpg', 'test1 (2).jpg', 'test1 (3).jpg', 'test1 (4).jpg', 'test1 (5).jpg', 'test1 (6).jpg', 'test1 (7).jpg', 'test1 (8).jpg'];
var num = 0;
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 100);
})();
</script>
</body>
</html>
You try to access the DOM element with the id rotator before it got loaded.
There are two ways to bypass this problem:
You can move your script tag below the img tag, because then the javascript get's execute after the img element has been loaded:
<img src="C:\Users\Shady\Downloads\restaurant\food1.jpg" alt="rotating image" width="400" height="300" id="rotator">
<script type="text/javascript">
(function() {
var rotator = document.getElementById('rotator');
var imageDir = 'C:\\Users\\Shady\\Downloads\\restaurant\\';
var delayInSeconds = 5;
var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];
var num = 0;
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
})();
</script>
You can set the onload event handler for the document to your anonymous function (or give it a name if you like):
<script type="text/javascript">
window.onload = function() {
var rotator = document.getElementById('rotator');
var imageDir = 'C:\\Users\\Shady\\Downloads\\restaurant\\';
var delayInSeconds = 5;
var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];
var num = 0;
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
};
</script>

Categories

Resources