I am trying to crete image slide using java script .Here is my code
<script type="text/javascript">
//variable that will increment through the images
var step = 1
function slideit() {
var image1 = ["imges/IMG_0579.JPG","imges/IMG_0580.JPG","imges/IMG_0581.JPG"];
//var image2 = new Image()
// var image3 = new Image()
//if browser does not support the image object, exit.
document.write("hello");
document.getElementById("slide").src = image1[step];
document.write("kjds");
if (step < 3)
step++;
else
step = 1;
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()", 2500);
}
slideit();
//-->
</script>
I am getting console error src is not null
here is img element
<img id="slide" src="imges/IMG_0588.JPG" />
well, I'm not good at expressing,so I give you the code directly.
<html>
<head>
<title>test</title>
</head>
<body>
<img id="slide" src="#" />
</body>
<script type="text/javascript">
var step = 1
function slideit() {
var image1 = ["imges/IMG_0579.JPG","imges/IMG_0580.JPG","imges/IMG_0581.JPG"];
document.getElementById("slide").src = image1[step];
if (step < 3)
step++;
else
step = 1;
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()", 2500);
}
slideit();
</script>
</html>
Related
I'm trying to do a slideshow gallery in Javascript, but it doesn't work... When I run this code, the src goes to veyron.jpg instantly, skipping the lamborghini.jpg.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="img" src="ferrari.jpg" />
<script>
img = document.getElementById("img");
images = new Array("ferrari.jpg","lamborghini.jpg","veyron.jpg");
end = images.length -1;
window.onload = setInterval(slide,1000);
function slide(){
for(i=0;i<=end;i++){
img.src = images[i];
}
}
</script>
</body>
</html>
why loop is exist here, you are casting all the images in all.
Do it with increment variable with start
<script>
var img = document.getElementById("img");
var images = new Array("ferrari.jpg","lamborghini.jpg","veyron.jpg");
var end = images.length -1;
var start = 0;
window.onload = setInterval(slide,1000);
function slide(){
img.src = images[start%end];
start++;
}
</script>
example fiddle
I am trying to do a traffic light sequence which runs on a timed basis automatically without user input. I have got the code working now, but it only runs through once and then stops. So how can I change this so it keeps going?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script>
var images = new Array()
images[0] = "image2.jpg";
images[1] = "image3.jpg";
images[2] = "image4.jpg";
setInterval("changeImage()", 3000);
var x=0;
function changeImage() {
document.getElementById("img").src=images[x]
x++;
}
</script>
</head>
<body>
<img id="img" src="image1.jpg">
</body>
</html>
Apply the remainder assignment %= to the counter with the length of the array.
function changeImage() {
document.getElementById("img").src = images[x];
x++;
x %= images.length;
}
I'm trying to rotate a set of 6 images in javascript, not jquery. The first image shows up, but the rest of them don't rotate. Here's my code:
<html>
<head>
<script type="text/javascript">
function rotatePic() {
var qutAd = document.getElementById("yumOreos");
var imgs = ["images/img1.png", "images/img2.png", "images/img3.png", "images/img4.png", "images/img5.png", "images/img6.png"];
var ad = 0;
qutAd.src = imgs[ad];
setInterval(function () {ad++;if (ad == imgs.length) {ad = 0;}}, 4000);
}
</script>
</head>
<body onload="rotatePic()">
<img id="yumOreos">
</body>
</html>
What am I doing wrong? Thanks.
You have to set the src in the interval function as well.
setInterval(function () {
ad++;
if (ad == imgs.length) ad = 0;
qutAd.src = imgs[ad];
}, 4000);
You have forgotten to change the index of the array, to change the source. So you can do this
setInterval(function () {if (ad == imgs.length) {ad = 0;} qutAd.src =imgs[ad++]}, 4000);
}
I need a basic image slider for my website , that consists of five images , in the following order
At the start > 1 st Should be visible for 3 seconds then disappear Image 2 - After 5 seconds 2nd image Should be visible for 3 seconds
then disappear Image 3 -After 10 seconds 3rd image Should be visible
for 3 seconds then disappear Image 4 -After 15 seconds 4th image
Should be visible for 3 seconds then disappear Image 5 -After 20
seconds 5th image Should be visible for 3 seconds then disappear
<div id="image" style="display:block">
<img src="images/one.jpg" name="slide" width="250" height="250" />
<div id="hello"></div>
<script>
var image1=new Image()
image1.src="images/one.jpg"
var image2=new Image()
image2.src="images/two.jpg"
var image3=new Image()
image3.src="images/three.jpg"
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
*///-->
var step=1
function slide(){
document.getElementById('image').style.display = "block";
//if browser does not support the image object, exit.
document.getElementById('hello').innerHTML = "";
if (step < 3 && step == 1 ) {
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
setInterval(function(){clock()},4000);
step++;
setTimeout("slide()",10000)
}
else if (step < 3 && step == 2 ) {
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
setInterval(function(){clock()},4000);
step++;
setTimeout("slide()",20000)
}
else {
step=1;
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
setInterval(function(){clock()},4000);
setTimeout("slide()",3000)
//call();
}
//call function "slideit()" every 2.5 seconds
//var refreshIntervalId = setInterval(fname, 10000);
}
//slide()
function clock()
{
document.getElementById('image').style.display = "none";
document.getElementById('hello').innerHTML = "Hai";
//window.clearInterval();
//setTimeout("slide()",100000)
return;
}slide()
</script>
</body>
var Slider = function() { this.initialize.apply(this, arguments) }
Slider.prototype = {
initialize: function(slider) {
this.ul = slider.children[0]
this.li = this.ul.children
// make <ul> as large as all <li>’s
this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'
this.currentIndex = 0
},
goTo: function(index) {
// filter invalid indices
if (index < 0 || index > this.li.length - 1)
return
// move <ul> left
this.ul.style.left = '-' + (100 * index) + '%'
this.currentIndex = index
},
goToPrev: function() {
this.goTo(this.currentIndex - 1)
},
goToNext: function() {
this.goTo(this.currentIndex + 1)
}
}
i got the solution
<script type="text/javascript">
var employees = [
{"image":"xxyy/images/one.jpg","time": "3000","interval":"12000" },
{"image":"xxyy.com/images/two.jpg","time": "4000" ,"interval":"14000"},
{"image":"xxyy.com/images/three.jpg" ,"time": "5000","interval":"15000"},
{"image":"xxyy.com/images/four.jpg","time":"4500","interval":"12000"}
];
</script>
<body>
<input id="val" type="hidden" name="hidden" value=""/>
<div id="image" style="display:block">
<img src="" name="slide" width="250" height="250" />
<img src="" name="slide" width="250" height="250" />
</div>
<div id="hello"></div>
<script>
var step=0;
function slide1(){
if(step < cnt ){
b = employees[step].image_name;
time = employees[step].time;
interval = employees[step].interval;
document.getElementById('hello').innerHTML = "";
document.getElementById('image').style.display = "block";
document.images.slide.src = "../images/"+b;
setTimeout("clock()",time);
setTimeout("slide1()",interval);
step++;
if(step >= cnt ) {
step = 0 ;
}
}
}
function clock() {
document.getElementById('image').style.display = "none";
document.getElementById('hello').innerHTML = "Hai";
//setTimeout("slide()",100000)
return ;
}
slide1() </script>`
I have an image slideshow which will work in any other browser I try but not in IE - it just does nothing but display the primary image. Please could someone tell me I not going mad and it is a simple fix that I can't see.
Many thanks
Mickeyjay.
Code below:
<div id="image_slide"><img src="images/.......jpg" id="slideit" name="slideit" border="0">
<script type="text/javascript">
var dimages=new Array();
var numImages=3;
dimages[0]=new Image();
dimages[0].src="images/.......jpg";
dimages[1]=new Image();
dimages[1].src="images/.......jpg";
dimages[2]=new Image();
dimages[2].src="images/.......jpg";
var curImage=-1;
function swapPicture()
{
if (document.images)
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete)
{
var target=0;
if (document.images.slideit)
target=document.images.slideit;
if (document.all && document.getElementById("slideit"))
target=document.getElementById("slideit");
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
setTimeout("swapPicture()", 1500);
}
else
{
setTimeout("swapPicture()", 150);
}
}
}
setTimeout("swapPicture()", 1500);
</script>
Try this simplified test, the idea is to load your pictures before start to swap, and will not need to test .complete that way.
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="image_slide"><img src="intro.jpg"
id="slideit" name="slideit" border="0"></div>
<script type="text/javascript">
var curImage = -1;
var numImages = 2;
var dimages = new Array();
function loadPictures()
{
dimages[0] = new Image();
dimages[0].src = "test1.jpg";
dimages[1] = new Image();
dimages[1].src = "test2.jpg";
setTimeout(swapPicture, 3000);
}
function swapPicture()
{
var nextImage = curImage + 1;
if (nextImage >= numImages)
nextImage = 0;
document.images.slideit.src = dimages[nextImage].src;
curImage = nextImage;
setTimeout(swapPicture, 1500);
}
setTimeout(loadPictures, 1500);
</script>
</body>
</html>