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);
}
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/
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>
I have the below images and I'm trying to show them one by one by interval of 3 seconds, but I am not able to get it work. It continues to stay on 0 and does not show the image, help would be nice:
<img src="one.png"></img>
<img src="two.png"></img>
javascript :
window.animate = function(){
var timer = '';
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
var timer = setInterval(function(){
alert(i);
imgs[i].style.display = 'block';
}, 3000);
if(i == imgs.length){
clearInterval(timer);
}
}
}
This might be what you're looking for:
window.animate = function(){
var imgs = document.getElementsByTagName('img');
var index = 0;
var timer = setInterval(function() {
// Hide all imgs
for (var i = 0; i < imgs.length; i++)
imgs[i].style.display = 'none';
// Display next img
imgs[index].style.display = 'block';
index++;
// Stop after all displayed.
if (index >= imgs.length)
clearInterval(timer);
}, 3000);
}
Here is one way to do it:
Fiddle: http://jsfiddle.net/aecuappp/
HTML:
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
JS:
var imgs = document.getElementsByTagName('img');
var interval = 3000;
for (var i = 0; i < imgs.length; i++) {
(function (index, time) {
setTimeout(function() {
imgs[index].style.display = 'block';
}, time);
} (i, interval));
interval = interval + 3000;
}
CSS:
img {
display: none;
}
Basically you can start interval at 0 if you want first image to show up immediately. And each time it adds 3 seconds to the timeout since these are all created roughly at the same time. I wrapped the setTimeout in an IIFE to give interval and index scope for when the timeout needs the values at the time we created the timeout.
Since these are essentially all timing out at the same time, you need to implement a callback pattern to your interval to trigger the next one, or you need to increase the interval per index; i.e. set the timer's interval to 3000*(i+1), which will effectively trigger the next one at the delay plus the previous delay. This does not account for the actual images load however. Additionally, I would consider using setTimeout since you only need to do this once.
var img = $('img.targets');
for (var i=0;i<img.length;i++) {
var duration = 3000;
setTimeout( function() {
// do dom work here
}, duration*(i+1));
}
You can accomplish this by queuing up some timeouts using setTimeout and then making sure you are correctly passing the value of i to the function within. You can do that easily by using forEach instead of a regular loop:
window.animate = function() {
var imgs = document.getElementsByTagName('img');
imgs.forEach(function(img, i) {
setTimeout(function() {
img.style.display = 'block';
}, (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)
});
var imag = document.getElementById('contentimage');
var imagarr = ["images/contimgtwo.jpg","images/contimg.jpg"]
//var convertimg = imagarr[i].toString();
var runtext = function(){
for (i=0;i<imagarr.length;i++){
imag.src=imagarr[i];
}
}
setTimeout(runtext,5000);
CSS:
#contentimage {
display:block;
top:1600px;
width:500px;
height:400px;
position:absolute;
}
#contentimage:hover {
opacity:0.5;
cursor:crosshair;
}
I'm trying to make a image slideshow using a for loop, the idea is that it will provide the .src path with the image path from the array, however the problem is the .src=" " method requires you to " " so I can't call the array and so it doesn't find the image, any way around this?
You should not loop the whole array in your runtext function. Doing that you actually apply only the last value of the array and always the last image is shown. Here is a modification of your script which may work:
var imag = document.getElementById('contentimage');
var imagarr = ["images/contimgtwo.jpg", "images/contimg.jpg"];
var index = 0, interval;
var runtext = function(){
imag.src = imagarr[index];
if(index < imagarr.length-1) {
index += 1;
} else {
index = 0;
}
interval = setTimeout(runtext, 5000);
}
var stopText = function() {
clearTimeout(interval);
}
interval = setTimeout(runtext, 5000);
I added a function which stops the slideshow. You still go through all the elements of the array, but the index is incremented on every runtext call.