I have two arrays : The first with images paths and the second is with different duration and I am trying using the following functions to set dynamically the 'setTimeout' of my 'changeImage()' function as follow:
function changeImage(){
var img = document.getElementById("img");
img.src = images[x];
var ztme = tme[x];
x++;
if(x >= images.length){
x = 0;
}
fadeImg(img, 100, true);
setTimeout("changeImage()",ztme ); //This is the problem!
}
function fadeImg(el, val, fade){
if(fade === true){
val--;
}else{
val ++;
}
if(val > 0 && val < 100){
el.style.opacity = val / 100;
setTimeout(function(){fadeImg(el, val, fade);}, 10);
}
}
var images = [],
x = 0;
images[0] = "daki/eco_pic.jpg";
images[1] = "daki/art_tnt.gif";
images[2] = "daki/mkv_uk.jpg";
images[3] = "daki/bolo_trt.jpg";
images[4] = "daki/folo_fr.jpg";
var tme = [], //values of 'Time' for a picture to stay displayed
tme[0]= 10000;
tme[1]= 50000;
tme[2]= 2000;
tme[3]= 30000;
tme[4]= 5000;
setTimeout("changeImage()", 15000);
If I give a fixed number for the timeout everything is working like a charm. Therefore to set it dynamically generates just errors.
Any idea to let this changeImage() function get dynamically the time?
Am gratefull to any help.
Thank you in advance.
Your tme array is not properly initialized.you should used semi column after its declaration;
var tme = []; //<=
tme[0]= 10000;
tme[1]= 50000;
tme[2]= 2000;
tme[3]= 30000;
tme[4]= 5000;
setTimeout("changeImage()", 15000);
Related
var i = 0; // Start point
var images = [];
var time = 3000;
// Image List
images[0] = 'group/image1.jpg';
images[1] = 'group/image2.jpg';
images[2] = 'group/image3.jpg';
images[3] = 'group/image4.jpg';
images[4] = 'group/image5.jpg';
// Change Image
function changeImg(){
document.slide.src = images[i];
if(i < images.length - 1){
i++;
} else {
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
i applied this code for slidshow in the site but it does not working on the neither in the chrome, EDGE, FIREFOX
after this code i will be able to make a slideshow effect for my website
If you put this into sublime it doesnt work. can anyone help me? its meant to be traffic lights that stay stationary. please can someone help? im not allowed to use adbanner but dont know how to make it work
<!DOCTYPE html>
<html>
<body>
function changeImage()
{
var img = document.getElementById("img");
img.src = images[x];
x++;
if(x >= images.length){
x = 0;
}
fadeImg(img, 100, true);
setTimeout("changeImage()", 30000);
}
function fadeImg(el, val, fade){
if(fade === true){
val--;
}else{
val ++;
}
if(val > 0 && val < 100){
el.style.opacity = val / 100;
setTimeout(function(){fadeImg(el, val, fade);}, 10);
}
}
var images = [],
x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
<img id="img" src="startpicture.jpg">
You can do below changes to your script for successful execution of the script:
// below script will be in script tag
var images = [],
x = 0;
$(document).ready(function() { // put below script in document.ready()
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
});
function changeImage()
{
var img = document.getElementById("img");
img.src = images[x];
x++;
if(x >= images.length){
x = 0;
}
fadeImg(img, 100, true);
setTimeout("changeImage()", 500);
}
function fadeImg(el, val, fade){
if(fade === true){
val--;
}else{
val ++;
}
if(val > 0 && val < 100){
el.style.opacity = val / 100;
setTimeout(function(){fadeImg(el, val, fade);}, 10);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<img id="img" src="startpicture.jpg">
I'm trying to create 360 degree image viewer like this using JavaScript.
But I couldn't achieve the effect for navigation link left, right, front and back (turning slowly). I need to hold loop iteration for a moment, I used the setInterval() function, and it didn't work for me. (This js is using 13 image to achieve.)
$(function() {
var leftImage =1 ;
var rightImage = 7;
var frontImage = 4;
var backImage = 10;
var arr1 = [];
for (var x=1; x<= 13; x++)
arr1.push("images/"+x + ".jpg");
function showImage(img){
$('#mousemove').attr('src', 'images/'+img+'.jpg');
}
function getCurrentImage(){
var src = $("#mousemove").attr("src");
var selected = src.split("/");
var index = selected[1].split(".");
var start = parseInt(index[0]);
return start;
}
$(".pre").click(function(){
var img = getCurrentImage() - 1;
if (img==0) img=13;
$('#mousemove').attr('src', 'images/'+img+'.jpg');
});
$(".next").click(function(){
var img = getCurrentImage()+ 1;
if (img==13) img=1;
$('#mousemove').attr('src', 'images/'+img+'.jpg');
});
$(".front").click(function(){
var img = getCurrentImage();
while( (img-1) != frontImage ){
if (img==13) img=1;
var reid = setInterval("showImage('+img+')", 5000);
img++;
}
});
$(".left").click(function(){
var img = getCurrentImage();
while( (img-1) != leftImage ){
if (img==13) img=1;
showImage(img);
img++;
}
});
$(".back").click(function(){
var img = getCurrentImage();
while( (img-1) != backImage ){
if (img==13) img=1;
showImage(img);
img++;
}
});
$(".right").click(function(){
var img = getCurrentImage();
while( (img-1) != rightImage ){
if(img==13) img=1;
showImage(img);
img++;
}
});
$("#mousemove").threesixty({images:arr1, method:'mousemove', 'cycle':2, direction:"backward"});
});
What does this parts of code means?
if (something) one=two;
someanbother();
Did you mean for example this?
if (something) {
one=two;
someanbother();
}
I'm using this Code to show the current progress in my progressbar:
var rotatingTextElement;
var rotatingText = new Array();
var ctr = 0;
function initRotateText() {
rotatingTextElement = document.getElementById("percent");
rotatingText[0] = rotatingTextElement.innerHTML;
rotatingText[1] = "5%";
rotatingText[2] = "10%";
rotatingText[3] = "15%";
rotatingText[4] = "20%";
rotatingText[5] = "25%";
rotatingText[6] = "30%";
rotatingText[7] = "35%";
rotatingText[8] = "40%";
rotatingText[9] = "45%";
rotatingText[10] = "50%";
rotatingText[11] = "55%";
rotatingText[12] = "60%";
rotatingText[13] = "65%";
rotatingText[14] = "70%";
rotatingText[15] = "75%";
rotatingText[16] = "80%";
rotatingText[17] = "85%";
rotatingText[18] = "90%";
rotatingText[19] = "95%";
rotatingText[20] = "100%";
setInterval(rotateText, 500);
}
function rotateText() {
ctr++;
if(ctr >= rotatingText.length) {
ctr = 0;
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
window.onload = initRotateText;
It basicly writs a new percentage in span#percent every 500 miliseconds.
The problem is that after the progressbar has reached 100% it starts again with 0%, 5% and so on.
How can I check if the percentages in the array rotatingText till [20] were all shown and then stop the rotation?
Do this instead:
var rotatingTextElement = document.getElementById("percent");
var ctr = 0;
function rotateText() {
rotatingTextElement.innerHTML = ctr + "%";
ctr += 5;
if (ctr <= 100) {
window.setTimeout(rotateText, 500);
}
}
rotateText();
There are a few ways you can tidy this up. To answer your question, start by assigning the interval to a variable:
var rotator = null;
...
rotator = setInterval(rotateText, 500);
...
function rotateText() {
ctr++;
if(ctr >= rotatingText.length -1) {
clearInterval(rotator);
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
...
Then instead of resetting the iterator to 0 when it goes out of bounds, clear the interval so it stops changing the value. You'll need to add the -1 so that it stops on rotatingText[length-1] (the last element)
I would like to make an image change after 30 seconds. The javascript I'm using looks like this:
var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
var x = 0;
function changeImage() {
document.getElementById("img").src=images[x];
x++;
}
HTML:
<img id="img" src="startpicture.jpg">
Now I haven't tested this one yet, but if my calculations are correct it will work :)
Now what I also want is to make a "fading transition" and I would like the changing of images to loop (it restarts after all the images have been shown).
Do any of you guys know how to do that?
I agree with using frameworks for things like this, just because its easier. I hacked this up real quick, just fades an image out and then switches, also will not work in older versions of IE. But as you can see the code for the actual fade is much longer than the JQuery implementation posted by KARASZI István.
function changeImage() {
var img = document.getElementById("img");
img.src = images[x];
x++;
if(x >= images.length) {
x = 0;
}
fadeImg(img, 100, true);
setTimeout("changeImage()", 30000);
}
function fadeImg(el, val, fade) {
if(fade === true) {
val--;
} else {
val ++;
}
if(val > 0 && val < 100) {
el.style.opacity = val / 100;
setTimeout(function(){ fadeImg(el, val, fade); }, 10);
}
}
var images = [], x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
You should take a look at various javascript libraries, they should be able to help you out:
mootools
jQuery
Dojo Toolkit
prototype
All of them have tutorials, and fade in/fade out is a basic usage.
For e.g. in jQuery:
var $img = $("img"), i = 0, speed = 200;
window.setInterval(function() {
$img.fadeOut(speed, function() {
$img.attr("src", images[(++i % images.length)]);
$img.fadeIn(speed);
});
}, 30000);
setInterval function is the one that has to be used.
Here is an example for the same without any fancy fading option. Simple Javascript that does an image change every 30 seconds. I have assumed that the images were kept in a separate images folder and hence _images/ is present at the beginning of every image. You can have your own path as required to be set.
CODE:
var im = document.getElementById("img");
var images = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg"];
var index=0;
function changeImage()
{
im.setAttribute("src", images[index]);
index++;
if(index >= images.length)
{
index=0;
}
}
setInterval(changeImage, 30000);
Just use That.Its Easy.
<script language="javascript" type="text/javascript">
var images = new Array()
images[0] = "img1.jpg";
images[1] = "img2.jpg";
images[2] = "img3.jpg";
setInterval("changeImage()", 30000);
var x=0;
function changeImage()
{
document.getElementById("img").src=images[x]
x++;
if (images.length == x)
{
x = 0;
}
}
</script>
And in Body Write this Code:-
<img id="img" src="imgstart.jpg">