This code I have works to an extent; It changes but only very quickly, I would like it to change after 3 seconds or so, but I can't find out how. Thanks in advance!
CODE:
<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left>
<script>
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;
setInterval(change_light,1);
function change_light() {
place += 1;
if (place > sequence.length -1) {
place = 0;
}
document.getElementById('theImage').src = sequence[place];
}
You should use milliseconds in setInterval period. Try this please. I also simplified your conditions:
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;
var frameInterval = 1000; // milliseconds
setInterval(change_light, frameInterval);
function change_light() {
place++;
place = place % sequence.length;
document.getElementById('theImage').src = sequence[place];
}
setInterval expects you to pass number of milliseconds (not seconds)
Use it like this: setInterval(change_light,3000);
It's quite simple, you did everything right! just a tiny change:
the function setInterval(change_light,3000); should receive it's time in milliseconds and not in seconds.
and also I would like to suggest to add some return value to setInterval then you will be able to clear this timer if want using:
clearInterval(change_light_id);
and here is your fixed code:
<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left>
<script>
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;
change_light_id = setInterval(change_light,3000);
function change_light() {
console.log(1);
place += 1;
if (place > sequence.length -1) {
place = 0;
}
document.getElementById('theImage').src = sequence[place];
}
</script>
Related
DEMO: http://jsfiddle.net/0s730kxx/
I'm trying to open Bootstrap Popover to auto-open on loop but so far I've have manage only to auto-play once.
HTML:
<div class="container">
Hover Left |
Hover Right |
Click Me
</div>
JS:
$(document).ready(function(){
var time = 1000;
var len = $('.myclass').length;
var count = 0;
var fun = setInterval(function(){
count++;
if(count>len){
clearInterval(fun);
}
$('.p'+count).popover('show');
if(count>1){
var pre = count-1;
$('.p'+pre).popover('hide');
}
}, time);
});
Could anyone help? I want it on loop so it plays forever or atleast 10 or 20 times.
Modify javascript part of your fiddle like this:
$(document).ready(function(){
var time = 1000;
var len = $('.myclass').length;
var count = 0;
var fun = setInterval(function(){
count++;
if(count>len){
$('.p'+(count-1)).popover('hide');
count = 1;
//clearInterval(fun);
}
$('.p'+count).popover('show');
if(count>1){
var pre = count-1;
$('.p'+pre).popover('hide');
}
}, time);
});
Since you are not clearing the interval in this modified snippet, it will run forever as you expected.
Thats because you have added line
if(count>len){
clearInterval(fun);
}
After showing them 1 time count is 3 and clearInterval(fun) is called
which terminates further call to function fun().
Original comment: You can't clear the interval and expect the loop to continue! Instead of clearing set the count back to 0. But you'll also need to remember to hide the last popover.
var fun = setInterval(function(){
count++;
$('.p' + count).popover('show');
if(count > 1){
$('.p' + (count - 1)).popover('hide');
}
if(count > len){
count = 0;
}
}, time);
Here is a fiddle: http://jsfiddle.net/89gcqnfm/
Simplicity and modular arithmetic are your friends:
$(document).ready(function(){
var time = 1000;
var eles = $('.myclass');
var count = 0;
var fun = setInterval(function(){
if(eles.length < 1)
return (console.log("No elements found!")&&!1) || clearInterval(fun);
eles.eq(count%eles.length).popover('hide');
eles.eq(++count%eles.length).popover('show');
}, time);
});
https://jsfiddle.net/L2487dfy/
I want to know how to click a button and have the array automatically cycle through images at a certain speed per interval, and have the array cycle never end.
Please help me with this
I Have my original code where everytime the user clicks a button the image changes how do I get it so that it only requires one button click and the images constantly cycle.
Thanks in advance
Here is my code:
<img id="colour" src="C:/images/i1">
<button type="button" onclick="light_change()">Cycle Through</button>
<script>
var assets = [
"C:/images/i2",
"C:/images/i3",
"C:/images/i1"
]
i = 0
function light_cycle(){
i = i+1
if(i==assets.length)i=0
var x = document.getElementById('colour');
x.src=assets[i]
}
</script>
this will solve your problem
function light_cycle(){
window.setInterval(function() {
i = i+1
if(i==assets.length)i=0
var x = document.getElementById('colour');
x.src=assets[i]
}, 2000);
}
in the comment place use images[imageNumber] as you wish.
var images = ['imageA.jpg','imageB.jpg','imageC.jpg'];
var getButton = document.getElementById('but');
var getImgContainer = document.getElementById('imgContainer');
var slideTime = 2000;
getButton.onePush = false;
getButton.addEventListener('click',function(event){
if(this.onePush) return;
this.onePush = true;
var imageNumber = 0;
var newInterval = setInterval(function(){
//do something with your urls HERE
console.log(images[imageNumber]);
getImgContainer.setAttribute('src',images[imageNumber]);
if(imageNumber===images.length-1) {
imageNumber = 0;
} else {
imageNumber++;
}
},slideTime);
});
img {
width:200px;
height:200px;
border:solid 1px #33aaff;
}
<button id="but">click me</button>
<br/><br/>
<img src="" id="imgContainer"/>
if i understand right what you want to get, so you need to move the i = i+1 to the end of the function like this :
function light_cycle(){
window.setInterval(function() {
if(i==assets.length)i=0
var x = document.getElementById('colour');
x.src=assets[i]
i = i+1
}, 3000);
}
I have been trying to write a script that changes an image src every two seconds based on a list.
So, everything is inside a forloop that loops over that list:
$(document).ready(function() {
var lis = {{dias|safe}}; <----- a long list from django. This part of the code works fine.
for (i=0; i<lis.length; i++){
src_img = lis[i][1];
var timeout = setInterval(function(){
console.log(src_img)
$("#imagen").attr("src", src_img);
}, 2000)
}
});
It doesn't work, the console logs thousands of srcs that correspond to the last item on the list. Thanks a lot for your help.
you don't need to run cycle in this case, you just save "pointer" - curentImage and call next array item through function ever 2 sec
var curentImage = 0;
function getNextImg(){
var url = lis[curentImage];
if(lis[curentImage]){
curentImage++;
} else {
curentImage = 0;
}
return url;
}
var timeout = setInterval(function(){
$("#imagen").attr("src", getNextImg());
}, 2000)
var curentImage = 0;
var length = lis.length;
function NewImage(){
var url = lis[curentImage];
if(curentImage < length){
currentImage++;
}
else{
currentImage = 0;
}
return url;
}
var timeout = setInterval(function(){
$("#imagen").attr("src", getNextImg());
}, 2000)
PS: Better than the previous one, Checks for lis length and starts from first if you reach end.
You need something like this
$(document).ready(function() {
var index = 0;
setInterval(function(){
src_img = lis[index++ % lis.lenght][1]; // avoid arrayOutOfBounds
$("#imagen").attr("src", src_img);
}, 2000)
});
url: http://www.gws-mbca.org
The slide show works in Firefox. It used to work in IE and Chrome. Now I get the following error in both IE and Chrome:
Uncaught TypeError: Cannot set property 'src' of undefined
The script is linked using a <script type="...> in the document head.
The code in the web page is as follows:
<section style="margin: 0 auto; text-align: center;">
<img src="./rPix/rp1.jpg" id="slide" width="900" height="200" alt="slide show images" />
</section>
<body onload="runShow();">
The function runShow is part of slideshow.js - Code is as follows:
/* An automatically rotating slide show using Javascript and the DOM.
This script cobbled together by Paul D.J. Vandenberg */
var j = 1;
var pix = new Array(11);
for (i = 0; i < pix.length; i++) {
pix[i] = "rPix/rp"+j+".jpg";
j++;
}
var index = Math.floor(Math.random() * 11) + 1;
var limit = pix.length - 1;
function runShow() {
if (index > limit) {
index = 0;
}
document.slide.src = pix[index];
setTimeout("runShow()", 10000);
index++;
}
Make sure you call runShow() after the id="slide" element has been added to the DOM.
document.slide is shorthand for document.getElementById("slide"). The latter will return null when no element with that id is defined.
The DOM must be loaded before the document can access any elements. Usually an onload event is used when the script is in the <head>
window.onload = function(){
var j = 1;
var pix = new Array(11);
for (i = 0; i < pix.length; i++) {
pix[i] = "rPix/rp"+j+".jpg";
j++;
}
var index = Math.floor(Math.random() * 11) + 1;
var limit = pix.length - 1;
window.runShow = function() {
if (index > limit) {
index = 0;
}
document.slide.src = pix[index];
setTimeout("runShow()", 10000);
index++;
}
};
"The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading." -MDN
Suggested improvements
I thought I would throw this part in because there are few things I think you can improve here as far as your approach and decided to offer some suggestions.
Lets remove body onload="runShow()" from your code and make it just <body> or whatever other class etc you might have on there.
Lets also go in and use an interval instead of a timeout because for longrunning processes they are more accurate.
Also, lets try to remove all strings from the callbacks.
Example:
<html>
<head>
window.onload = function(){
var pix = [];//array to hold image source strings
var limit = 10;//0 based count for images
for( var i = 0; i < limit+1; i++ ){//runs 11 times
pix.push("rPix/rp"+(i+1)+".jpg";//push incrementally adds to pix array
}
var index = limit;//last index for image source in pix array
var slide = document.getElementById("slide");//cache slide image element
function runShow(){
if( index > limit ) index = 0;//cycle images by array length
slide.src = pix[index++];//change slide image using cached element
}
runShow();//run on load
setInterval(runShow,10000);//run every 10 seconds
};
</head>
<body>
<section style="margin: 0 auto; text-align: center;">
<img src="./rPix/rp1.jpg" id="slide" width="900" height="200" alt="slide show images" />
</section>
</body>
</html>
So here's what the code looks like now.
/* An automatically rotating slide show using Javascript and the DOM.
This script cobbled together by Paul D.J. Vandenberg with a nice
assist from stackoverflow */
window.onload = function() {
var j = 1;
var pix = new Array(11);
for (i = 0; i < pix.length; i++) {
pix[i] = "rPix/rp"+j+".jpg";
j++;
}
var index = Math.floor(Math.random() * 11) + 1; // Start at a random slide
var limit = pix.length - 1;
var slide = document.getElementById("slide"); // Cache slide image element
function runShow() {
if (index > limit) {
index = 0;
}
slide.src = pix[index++];
}
setInterval(runShow, 10000); // Interval more reliable than timeOut
runShow();
}
I could really use some help. I have a javascript / jquery slider below that repeats over and over. I would like it to stop repeating when a specific button is clicked if possible. I am a complete novice and it took a lot to get to this point! Any help would be greatly appreciated.
$(document).ready(function () {
var i = 0;
var z = 0;
delay = 5000;
var el = $('#scroll-script');
var ql = $('#info-box');
var classesb = ['fp-info-one', 'fp-info-two', 'fp-info-three', 'fp-info-four'];
var classes = ['fp-slide-one', 'fp-slide-two', 'fp-slide-three', 'fp-slide-four'];
var interval = setInterval(function () {
el.removeClass().addClass(classes[i]);
i = (i + 1) % 4;
ql.removeClass().addClass(classesb[z]);
z = (z + 1) % 4;
}, delay);
});
$(document).ready(function () {
var i = 0;
var z = 0;
delay = 5000;
var el = $('#scroll-script');
var ql = $('#info-box');
var classesb = ['fp-info-one', 'fp-info-two', 'fp-info-three', 'fp-info-four'];
var classes = ['fp-slide-one', 'fp-slide-two', 'fp-slide-three', 'fp-slide-four'];
var interval = setInterval(function () {
el.removeClass().addClass(classes[i]);
i = (i + 1) % 4;
ql.removeClass().addClass(classesb[z]);
z = (z + 1) % 4;
}, delay);
// code that stop repeat
$('#your_button').on('click', function() {
clearInterval(interval );
});
});
As, you're using setInterval() for repeating time, so to clear that timer you need to use clearInterval()..
Note
#your_button will be replace with appropriate selector for your target button.
You just need to use clearInterval():
$(".somebutton").click(function()
{
clearInteval(interval);
interval=null;
});
i think clearInterval() help you to achieve this.
just apply this on click() event.
something like:
$('#element').click(function(){
clearInterval(Interval_OBJECT);
});
Use clearInterval(interval) when you want to stop the repeating action.
something like :
$('#btn').on('click', function(){ clearInterval(interval); });