Play images in JavaScript - javascript

I want to make the image animation using JavaScript with some controllable functionality, such as play, pause and stop, the following is so far I've tried:
<html>
<head>
<title>Image Player</title>
<script type="text/javascript" language="javascript">
window.onload=function () {
var rotator=document.getElementById("slideshow_content");
var images=rotator.getElementsByTagName("img");
for (var i=1; i<images.length; i++) {
images[i].style.display="none";
}
var counter=1;
setInterval(function () {
for (var i=0; i<images.length; i++) {
images[i].style.display="none";
}
images[counter].style.display="block";
counter++;
if (counter==images.length) {
counter=0;
}
}, 3000);
function playimage() {
player.play();
}
function pauseimage() {
player.pause();
}
function stopimage() {
player.pause();
player.currentTime=0;
}
};
</script>
</head>
<body>
<div id="slideshow">
<div id="slideshow_content" width="200px" height="200px"
style="padding-top: 10px; padding-bottom: 10px;">
<img alt="" src="a.jpg" />
<img alt="" src="b.jpg" />
<img alt="" src="c.jpg" />
<img alt="" src="d.jpg" />
<img alt="" src="e.jpg" />
<img alt="" src="f.jpg" />
</div>
<button onclick="playimage()">
Play</button><br />
<button onclick="pauseimage()">
Pause</button><br />
<button onclick="stopimage()">
Stop</button><br />
</div>
</body>
</html>
But it doesn't work as expected, when I click on start button it doesn't not show me any image ..
How can I make it work, as when I click on the start button and the images could be played; when I click on stop and it could stop .. ?
What I'm doing wrong and where is the problem?


A simple and poor implementation .. :
<html>
<head>
<title>Image Player</title>
</head>
<body>
<script>
function Player() {
var rotator=document.getElementById('slideshow_content');
var images=rotator.getElementsByTagName('img');
var intervalID;
var counter=1;
function animate() {
var i;
for (i=0; i<images.length; i++) {
images[i].style.display='none';
}
images[counter].style.display='block';
counter++;
if (counter==images.length) {
counter=0;
}
}
this.pause=function () {
if (undefined!==intervalID) {
window.clearInterval(intervalID);
intervalID=undefined;
}
};
this.stop=function () {
this.pause();
for (var i=1; i<images.length; i++) {
images[i].style.display='none';
}
};
this.play=function () {
if (undefined===intervalID) {
intervalID=window.setInterval(animate, 1000);
}
};
this.stop();
this.currentTime=0;
}
</script>
<script>
function playimage() {
player.play();
}
function pauseimage() {
player.pause();
}
function stopimage() {
player.stop();
player.currentTime=0;
}
function Page_Load() {
player=new Player();
player.play();
}
document.onreadystatechange=function () {
if ('complete'==document.readyState) {
Page_Load();
}
};
var player;
</script>
<div id='slideshow'>
<div id='slideshow_content' width='200px' height='200px' style='padding-top: 10px; padding-bottom: 10px;'>
<img src='a.jpeg' />
<img src='b.jpeg' />
<img src='c.jpeg' />
<img src='d.jpeg' />
</div>
<input type='button' value='Play' onclick='playimage();' />
<input type='button' value='Pause' onclick='pauseimage();' />
<input type='button' value='Stop' onclick='stopimage();' />
</div>
</body>
</html>
Some things to note:
Images are renamed for my testing, you will need to name them as your requirement.
You will need to ensure the elements you are using of the document are complete loaded.
player is involved in your code, but I've seen it nowhere, and I declared a Player class for creating the player.
Use a long text as the code argument of setInterval is a bad idea, I declared it a private function(animate) instead.
Read carefully how the play, pause and stop is implemented within the code.
I have no idea what currentTime is used for, just stay with it.

Related

Problem with image 'rotations' within a div element

I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.
<!DOCTYPE html>
<html>
<title>test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<style>
div.rotation {
height: 256px;
width: 100%;
padding: 0px;
background-color: powderblue;
border-style: solid;
border-width: 5px;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="w3-quarter">
<div class="w3-padding-small">
<div class="w3-center">
<div class="rotation">
<p>
<img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />
<img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' />
<img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />
<img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />
</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
var rotation = function () {
var currentImage,
images = [],
ImgName = [],
count,
hideImages,
showImage,
fn;
count = (function () {
// Figure out how many images we have on the rotation
var x = 0;
while (document.getElementById('rotateImg' + (x + 1).toString())) {
images[x] = document.getElementById('rotateImg' + x.toString());
ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;
x++;
}
return images.length;
})();
hideImages = function () {
// Hide all the images
for (var i = 0; i < count; i++) {
images[i].style.display = 'none';
}
};
showImage = function (number) {
document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";
images[number].style.display = 'block';
};
fn = {};
fn.setupRotation = function () {
// Show the first image
currentImage = 0;
showImage(currentImage);
// Start the rotation
var interval = setInterval(rotation.advanceRotation, 4000);
};
fn.advanceRotation = function () {
if (currentImage + 1 == count)
currentImage = 0;
else
currentImage++;
hideImages();
showImage(currentImage);
};
return fn;
} ();
rotation.setupRotation();
</script>

One thought might be to pluck off the first child and slam him to the end of the line.
let images = document.querySelector('#images');
setInterval(() => {
let el = images.removeChild(images.childNodes[0]);
images.appendChild(el);
}, 1000);
#images {
font-size: 0;
}
.img {
display: inline-block;
width: 30px;
height: 30px;
}
<div id="images">
<div class="img" style="background-color: red"></div>
<div class="img" style="background-color: orange"></div>
<div class="img" style="background-color: yellow"></div>
<div class="img" style="background-color: green"></div>
<div class="img" style="background-color: blue"></div>
</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>

How to Stop or Pause JavaScript Animation?

I had a simple JS script which takes an array of images and display them as an animation by clicking a start button.
I am trying to stop the animation by clicking on the stop button (stop on the current image of the animation), which does not work.
I will appreciate any help. Thanks
<script type="text/javascript">
var images = new Array("unc_prop_1dim_x1.jpg", "unc_prop_1dim_x2.jpg",
"unc_prop_1dim_x3.jpg", "unc_prop_1dim_x4.jpg", "unc_prop_1dim_x5.jpg");
var nextImage = 0; //Index for nextImage
var timeout = 400; //In milliseconds
function animation() {
document.ani.src = images[nextImage];
nextImage++;
if (nextImage==images.length) {
nextImage = 0;
}
setTimeout("animation();", timeout);
};
function stopAnimation() {
ani.stop();
}
document.querySelector('#stop').onclick = function() {
stopAnimation();
};
</script>
<body>
<div id="main" style="width: 700px; height: 500px;">
<img src="unc_prop_1dim_x1.jpg" name="ani"/>
</div><br>
<input type="button" id="start" onclick="animation();" value="Start Animation">
<input type="button" id="stop" value="Stop!">
</body>

How can I add fade in, fade out effects

I have a simple script which works as a simple html gallery. However, I need to add some transition effects to my gallery, something like fade in, fade out, or the effect of something similar to the subtitles at the end of every movie (you know what I mean).
How can I solve this? I would like to make it using only JS, HTML, CSS, without external plugins. Is it possible? For now on, I have only something like this below:
<head>
<title>Test</title>
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
i+=3;
},5000);
</script>
</head>
<body>
<div align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </br>
</div>
</body>

I just created a JQuery function and added it to your script. Now when you click on that button it will do as it says. It is just as an example how to do that
<html>
<head>
<title>Test</title>
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
i+=3;
},5000);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".btn1").click(function(){
$("#link1").fadeOut()
});
$(".btn2").click(function(){
$("#link1").fadeIn();
});
});
</script>
</head>
<body>
</script>
</head>
<body>
<div align="center">
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </br>
</div>
</body>
</html>

You can definitely achieve some effects with CSS. But not all (like jQuery-ui's blind)
most effects consist of changing:
opacity: [0-1]
display: relative; left: [X]px; top: [Y]px or transform: translate([X]px,[Y]px)
overflow: hidden
and an animation:
either CSS:
#img {
animation: fade-in 2s infinite;
}
#keyframe fade-in {
from {
left: -200px
}
to {
left: 0
}
}`
or JavaScript:
var img = document.getElementById('img');
for(i = 1; i <= 100; i++){
(function(step) {
setTimeout(function() {
img.style.transform = "translate(-"+(200-step*2)+"px, 0)";
}, step * 20);
})(i);
}
to achieve something like blind, you must move an image-container <div> left, while moving the image right at the same speed.
Here's a simplified blind effect example
https://jsfiddle.net/warkentien2/Lh10phuv/5/
Here I've implemented 8 pure JavaScript effects (including blind, with instructions)
- fade in
http://codepen.io/warkentien2/pen/pboVXR
- fade out
http://codepen.io/warkentien2/pen/EyxpVq

You can try this one. I have not changed your code at all.
HTML
<div align="center">
<a href="http://www.example1.com" id="link1">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' >
</a>
</br>
</br>
<a href="http://www.example2.com" id="link2">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' >
</a>
<br>
<br>
<a href="http://www.example3.com" id="link3">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3'>
</a>
<br>
</div>
Css
<style>
.animate{transition:all 1s ease; opacity:0;}
</style>
Js
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
document.getElementById('link1').style.opacity = 0;
setTimeout(function(){
document.getElementById('link1').setAttribute("class", "animate");
document.getElementsByClassName('animate')[0].style.opacity = 1;
setTimeout(function(){document.getElementById('link1').removeAttribute("class", "animate")},500)
},500)
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
document.getElementById('link2').style.opacity = 0;
setTimeout(function(){
document.getElementById('link2').setAttribute("class", "animate");
document.getElementsByClassName('animate')[1].style.opacity = 1;
setTimeout(function(){document.getElementById('link2').removeAttribute("class", "animate")},500)
},500)
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
document.getElementById('link3').style.opacity = 0;
setTimeout(function(){
document.getElementById('link3').setAttribute("class", "animate");
document.getElementsByClassName('animate')[2].style.opacity = 1;
setTimeout(function(){document.getElementById('link3').removeAttribute("class", "animate")},500)
},500)
i+=3;
},5000);
</script>
Check live example here - https://jsfiddle.net/Rit_Design/9mkvffnk/1/
Remember the code can be much more smarter.

Javascript slideshow, image skips on first playthrough?

I have created the following slideshow in javascript. But for some reason on the first slide through of images, the first image just moves off and the second image does the "sliding". Any help would be appreciated. I have included comments to help make the code more readable.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
img.pic {
position: absolute;
height: 768px;
width: 1024px;
}
html, body {
background-color:#3b3b35;
width: 1024px;
height: 768px;
margin: 0;
padding: 0;
overflow:hidden;
}
</style>
</head>
<body onload="startImages()">
<img class="pic" id="slide0" src="1.jpg" alt="pic1" />
<img class="pic" id="slide1" src="2.jpg" alt="pic2" />
<img class="pic" id="slide2" src="3.jpg" alt="pic3" />
<img class="pic" id="slide3" src="4.jpg" alt="pic4" />
<img class="pic" id="slide4" src="5.jpg" alt="pic5" />
<img class="pic" id="slide5" src="6.jpg" alt="pic6" />
<img class="pic" id="slide6" src="7.jpg" alt="pic7" />
<img class="pic" id="slide7" src="8.jpg" alt="pic8" />
<img class="pic" id="slide8" src="9.jpg" alt="pic9" />
<img class="pic" id="slide9" src="10.jpg" alt="pic10" />
<script type="text/javascript">
// Define the x start variable
var xstart = 0;
// Constructor for an image object:
function Image(obj, x) {
this.object = obj;
this.xpos = x;
}
// Image array
var Images = [];
// Sets up the images
function startImages() {
for (var Imageamount = 0; Imageamount < 10; Imageamount++) {
var Imgstore = document.getElementById("slide" + Imageamount);
// Puts image in the array
Images[Imageamount] = new Image(Imgstore, xstart);
xstart = xstart - 1024;
}
// Controlls the delays
setInterval(function () {
var val = 0;
var Interval = setInterval(function () {
imSlide();
val++;
if (val == 16) clearInterval(Interval); // 16*64 = 1024, ie image size
}, 30);
}, 5000);
}
function imSlide() { // Controlls sliding
for (var Slide = 0; Slide < Images.length; Slide++) {
var image = Images[Slide];
// Update + 64 to give a smooth slide. Updates 16 times so 16*64=1024
var x = image.xpos + 64;
// Move image from far right back to front of image stack
if (x == 5120) {
x = -5120;
}
// Store position back in array
image.xpos = x;
// Move the image
image.object.style.left = x + "px";
}
}
</script>
</body>
</html>

The reason that your slide show skips on the first interval is because you aren't setting the image's position when you first create your Image objects; you're only setting a variable that you have named 'xpos'. This causes all your images to overlap each other and display the last image, #slide9, on top of the others on page load.
modify your Image object declaration to this:
function Image(obj, x) {
this.object = obj;
this.xpos = x;
this.object.style.left = x + "px"; //<--- this is the new part
}
here is the jsfiddle: http://jsfiddle.net/w9qQx/4/

Categories