Please note it can ONLY be JavaScript. Please see below my current HTML.
I need to rotate between pages as the code currently does. BUT, I need to be able to pause/play between the pages.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<iframe id="rotator" src="http://www.example.com" onload="this.width=1000;this.height=750;"></iframe>
<script>
// start when the page is loaded
window.onload = function () {
var urls = [
"http://www.example.com",
"http://www.example2.com",
// ....
"http://www.example3.com"
];
var index = 1;
var el = document.getElementById("rotator");
setTimeout(function rotate() {
if (index === urls.length) {
index = 0;
}
el.src = urls[index];
index = index + 1;
// continue rotating iframes
setTimeout(rotate, 15000);
}, 15000); // 5000ms = 5s
};
</script>
</body>
</html>
use setInterval and clearInterval method as like this below
var run;
var el =document.getElementById('rotator');
var urls = [
"http://www.example.com",
"http://www.example2.com",
"http://www.example3.com"
];
(function()
{
run = setInterval(rotate , 1000)
console.log('start')
})()
var index=0;
function rotate(){
if (index === urls.length) {
index = 0;
}
el.src = urls[index];
index ++;
}
function pause(){
clearInterval(run);
console.log('pause')
}
function play(){
run = setInterval(rotate , 1000);
console.log('play');
}
<iframe id="rotator" src="http://www.example.com" ></iframe>
<button onclick="pause()">
pause
</button>
<button onclick="play()">
play
</button>
Related
this intro slideshow works so far, it starts automatically when you load the webpage and cycles through the 4 photos. But I want the slideshow to disappear (to reveal the website homepage underneath) after it has cycled through the 4 photos only once, but need some help how to proceed forward.
<!DOCTYPE html>
<head>
</head>
<body>
<div id="slideshow">
<img id="pic" width="100%" height="auto" alt="Icon" src="one.jpg">
</div>
<script>
var i, imgs, pic;
function rotate() {
pic.src = imgs[i];
(i === (imgs.length - 1)) ? (i = 0) : (i++);
setTimeout(rotate, 1000);
}
function init() {
pic = document.getElementById("pic");
imgs = ["one.jpg", "two.jpg", "three.jpg", "four.jpg"];
var preload = new Array();
for (i = 0; i < imgs.length; i++) {
preload[i] = new Image();
preload[i].src = imgs[i];
}
i = 0;
rotate();
}
document.addEventListener("DOMContentLoaded", init, false);
</script>
</body>
</html>
var count = 0
function rotate() {
pic.src = imgs[i];
(i === (imgs.length - 1)) ? (i = 0) : (i++);
if (count < imgs.length) {
count++;
setTimeout(rotate, 1000);
} else {
document.getElementById("slideshow").style.display = 'none';
}
}
Hi,
you have to count your number of slides. Afterwards just check if you already finished.
greetings
<!DOCTYPE html>
<head>
</head>
<body>
<div id="slideshow">
<img id="pic" width="100%" height="auto" alt="Icon" src="one.jpg">
</div>
<script>
var i, imgs, pic;
function rotate() {
pic.src = imgs[i];
if(i<(imgs.length - 1)){
i++;
setTimeout(rotate, 1000);
}
}
function init() {
pic = document.getElementById("pic");
imgs = ["one.jpg", "two.jpg", "three.jpg", "four.jpg"];
var preload = new Array();
for (i = 0; i < imgs.length; i++) {
preload[i] = new Image();
preload[i].src = imgs[i];
}
i = 0;
rotate();
}
document.addEventListener("DOMContentLoaded", init, false);
</script>
</body>
</html>
if(i<(imgs.length - 1)){
i++;
setTimeout(rotate, 1000);
}
You need to check for how many time the rotate() method need to call.
I have a list:
var images = ["image1.png", "image2.png", "image3.png", "image4.png"];
I made a code which attempts at displaying image1 when the page loads but for ever 3 seconds the image changes to the next image in the list. However when the code was ran it was stuck on image1 and did not change in the next 3 seconds.
This is my JavaScript code so far:
<html>
<body>
<body onload = "myFunction()">
<img src ="image1.png" id = "target" >
<script language="javascript">
var counter = 0;
var images = ["image1.png", "image2.png", "image3.png", "image4.png"];
function myFunction() {
counter++;
if (counter > 4) {
counter = 0
}
target = document.getElementById ("target").src = images[counter];
setTimeout("myFunction", 3000)
}
window.onLoad = function(){
myFunction();
}
</script>
</body>
</html>
I have seen similar codes but the answers answered did not meet my specification.
You can use setInterval (passing a function rather than a string) instead of recursively calling setTimeout. Also note that your counter logic can be greatly simplified with the use of the modulo (%) operator:
<html>
<body>
<img src="image1.png" alt="image1.png" id="target">
<script language="javascript">
var counter = 0;
var images = ["image1.png", "image2.png", "image3.png", "image4.png"];
var target = document.getElementById("target")
setInterval(function myFunction() {
counter = (counter + 1) % images.length
target.src = target.alt = images[counter]
}, 3000)
</script>
</body>
</html>
In setInterval, you need to pass the function myFunction as parameter, not the function name "myFunction":
Change it to this:
setTimeout(myFunction, 3000);
setTimeout - will work only one time
setInterval - will continue always
<html>
<body>
<img src ="logo.png" id = "target" >
<script language="javascript">
var counter = 0;
var images = ["logo.png", "222.jpg"];
function myFunction() {
counter++;
if (counter > 1) {
counter = 0
}
target = document.getElementById("target").src = images[counter];
}
function my2(){
setInterval("myFunction()", 1000);
}
window.onload = function(){
my2();
}
</script>
</body>
</html>
Expanding on what others have mentioned already.
It's window.onload - not window.onLoad - Casing is important
Update to
setTimeout(myFunction, 3000);
Place that in your window.onload
JS:
var counter = 0;
var images = ["image1.png", "image2.png", "image3.png", "image4.png"];
function myFunction() {
counter++;
if (counter > 4) {
counter = 0
}
target = document.getElementById ("target").src = images[counter];
}
window.onload = function(){
setTimeout(myFunction, 3000)
}
You can use setInterval instead of setTimeout
var counter = 0;
var images = ["image1.png", "image2.png", "image3.png", "image4.png"];
function myFunction() {
counter++;
if (counter > 3) {
counter = 0
}
target = document.getElementById("target").src = images[counter];
}
setInterval(myFunction, 3000);
JSFiddle
Hi Im trying to make a set of automated traffic lights but I can't get them to stop running. I have tried using window.clearInterval() but it won't work. Im doing this for my controlled assessment for my GCSE. I really don't know why this won't work so any help would be great. Thanks.
var asset = [
"redyellow.png",
"green.png",
"yellow.png",
"red.png"
];
var counter = 0;
function changeLights() {
if (counter == asset.length) counter = 0;
var image = document.getElementById('redImg');
image.src=asset[counter];
counter = counter + 1;
}
var toggle = 1
function timer() {
if (toggle === 1) {
var on = setInterval(changeLights,5000)
}
else {
window.clearInterval()
}
}
function stopTimer() {
toggle = toggle + 1
}
<!DOCTYPE html>
<html>
<body>
<h1>Traffic Lights</h1>
<img id="redImg" src="red.png" alt="Red traffic light" />
<p>
<button type="button" onclick="timer()">Start Lights</button>
<button type="button" onclick="stopTimer()">Stop Lights</button>
</p>
</body>
</html>
Try making the interval a global variable. Also you need to call self.clearInterval(interval). For example:
var interval;
function timer() {
interval = self.setInterval(changeLights, 5000);
}
function stopTimer() {
self.clearInterval(interval);
}
In your case:
var asset = [
"redyellow.png",
"green.png",
"yellow.png",
"red.png"
];
var counter = 0;
var interval = null;
function changeLights() {
if (counter == asset.length) counter = 0;
var image = document.getElementById('redImg');
image.src = asset[counter];
image.alt = asset[counter]; // debug
counter = counter + 1;
}
function timer() {
if (!interval) {
interval = self.setInterval(changeLights, 1000);
}
}
function stopTimer() {
self.clearInterval(interval);
interval = null;
}
<!DOCTYPE html>
<html>
<body>
<h1>Traffic Lights</h1>
<img id="redImg" src="red.png" alt="Red traffic light" />
<p>
<button type="button" onclick="timer()">Start Lights</button>
<button type="button" onclick="stopTimer()">Stop Lights</button>
</p>
</body>
</html>
Note that I changed it in some ways, most notably removing the code having to do with toggle. This version also allows you to start it again without reloading the page, and prevents you from starting multiple intervals, which would require reloading the page to stop.
I'm running this array that plays the video array, but ends abruptly and doesn't loop. Of course I tried the HTML video attribute loop and loop="true" and loop="loop"... with no avail..
I just want to loop'it t'night:
var videos =
[
[
"img/poster.png",
"img/trippyInk.mp4"
],
[
"img/poster.png",
"img/brothaDive.webm"
],
[
"img/poster.png",
"img/wtuD97H.webm"
],
[
"img/poster.png",
"img/ride.webm"
]
];
function switchVideo(n) {
if (n >= videos.length) n = 0;
var mp4 = document.getElementById("mp4");
var parent = mp4.parentNode;
document._video.setAttribute("poster", videos[n][0]);
mp4.setAttribute("src", videos[n][1]);
document._video.load();
document._video.play();
I tried this command, this also didn't work.
$('video').attr('loop','loop');
}
Thanks!
Update
The key to making a series of video loop is to add your loop logic to the ended event.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vidArray</title>
</head>
<body>
<video id="vid" src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" poster="https://glpjt.s3.amazonaws.com/so/av/vs2s3.png" controls width="480" height="auto">
Your browser sux, why haven't you upgraded to Chrome or Firefox? Do you live in a cave?
</video>
<script>
var poster = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.png"]
var videos = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4"]
var vid = document.getElementById("vid");
var n = videos.length;
var cnt = 0;
function playVideo(x) {
var png = poster[x];
console.log('poster: ' + png);
var mp4 = videos[x];
console.log('video: ' + mp4);
vid.setAttribute('poster', png);
vid.src = mp4;
vid.load();
vid.play();
}
vid.addEventListener('ended', next, false);
function next() {
cnt++;
if (cnt < n) {
playVideo(cnt);
} else {
cnt = 0;
playVideo(cnt);
}
}
</script>
</body>
</html>
I separated the arrays, it works. Added a button to cycle through the videos.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vidArray</title>
</head>
<body>
<video id="vid" src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" poster="https://glpjt.s3.amazonaws.com/so/av/vs2s3.png" loop controls width="480" height="auto">
Your browser sux, why haven't you upgraded to Chrome or Firefox? Do you live in a cave?
</video>
<button id="btn1">Next</button>
<script>
var poster = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.png"]
var videos = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4"]
var n = videos.length;
var cnt = 0;
function switchVideo(n) {
var vid = document.getElementById("vid");
var png = poster[n];
console.log('poster: ' + png);
var mp4 = videos[n];
console.log('video: ' + mp4);
vid.setAttribute('poster', png);
vid.src = mp4;
vid.load();
vid.play();
}
var btn1 = document.getElementById("btn1");
btn1.addEventListener('click', function(e) {
cnt++;
if (cnt < n) {
switchVideo(cnt);
} else {
cnt = 0;
switchVideo(cnt);
}
}, false);
</script>
</body>
</html>
I think you're looking for:
$('video').attr('loop','loop');
is it possible to detect our mouse when down(pressed), and start counting from zero for a few seconds...and after 5 seconds mousedown, it redirect.
I have found a script that does it, but I am confuse on how to show the second when the mouse is being pressed.
Here it is.
<script type="text/javascript">
/*<![CDATA[*/
document.getElementsByClassName=function(classname){
var pattern=new RegExp("(^|\s)"+classname+"(\s|$)");
var results=new Array();
var d=document.getElementsByTagName('*'), l=d.length;
for (var k=0; k<l; k++) if (pattern.test(d[k].className)) results.push(d[k]);
return results;
}
var timer;
function startStuff(el,ii)
{
var temp=el.innerHTML;
timer=window.setTimeout('doStuff("'+temp+'");',3000);
}
function stopStuff(el)
{
window.clearTimeout(timer);
}
function doStuff(l)
{
<?php echo"<html>"; header( 'Location: http://www.google.com' ) ; echo"</html>";?>
}
window.onload=function() {
var links=document.getElementsByClassName('clicker');
for (var i=0; i<links.length; i++)
{
links[i].onmousedown=function() {startStuff(this)};
links[i].onmouseup =function() {stopStuff(this)};
}
}
/*]]>*/
</script>
</head>
<body>
Link1
Link2
Link3
</body>
</html>
If possible, I want the second is displayed with images....
I would not use images. Try something like this:
link = document.getElementById('redirect');
counter = document.getElementById('counter');
timeRemaining = 5000;
link.onclick = function(e) {
e.preventDefault();
setInterval(function(){
if (timeRemaining > 0) {
timeRemaining -= 1000;
counter.innerHTML = timeRemaining/1000;
} else {
window.location = link.href;
}
},1000);
};
Full working example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Redirect to Google</title>
</head>
<body>
<a href="http://www.google.com" id="redirect">
Go to google in <span id="counter">5</span> seconds
</a>
<script type="text/javascript">
link = document.getElementById('redirect');
counter = document.getElementById('counter');
timeRemaining = 5000;
link.onclick = function(e) {
e.preventDefault();
setInterval(function(){
if (timeRemaining > 0) {
timeRemaining -= 1000;
counter.innerHTML = timeRemaining/1000;
} else {
window.location = link.href;
}
},1000);
};
</script>
</body>
</html>