CODEWITHSUNDEEP
javascriptsliding
Diwash Regmi
Diwash Regmi

Reputation: 25

Sliding image using JavaScript

I am trying to create a image slider, using JavaScript.

HTML

<img src="firstcar.gif" name="slide" width="100" height="56" />

<img src="secondcar.gif" name="slide1" width="100" height="56" />

Script

var image1 = new Image()
image1.src = "firstcar.gif"
var image2 = new Image()
image2.src = "secondcar.gif"
var image3 = new Image()
image3.src = "thirdcar.gif"

//variable that will increment through the images
var step = 1

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 1.5 seconds
    setTimeout("slideit()", 1500)
}
slideit()

I wanted to slide two image in such a way that the upcoming image displays in the second place and slides to the first place and both the image must be inline.

I can't find the error. Can someone help me fix it?

Upvotes: 1

Views: 11627

Answers (2)

Encode Dna
Encode Dna

Reputation: 19

Image slider are pretty easy to design in java-script. All you need is a container on which the images will be shown or slides and a script which will rotate or slide the images. The sliding can be random or in a sequence. Check the below link which displays a manual slider with the script.

http://www.encodedna.com/2012/11/javascript-thumbnail-slider.htm

Upvotes: 1

Starx
Starx

Reputation: 78981

There are lots of image sliders available on the internet. You can google them.

However, the script you are building above does not create sliding effect in any way. It just switches the image and fakes the effect to looks like as if it was sliding.

The working version of the script will look something like this.

var step = 1;

function slideit() {
    //if browser does not support the image object, exit.
    var img = document.getElementById('slide');
    img.src = "image" + step + ".src";
    console.log(img.src);
    if (step < 3) step++;
    else step = 1;
    //call function "slideit()" every 1.5 seconds
    setTimeout(slideit, 1500);
}
window.onload = slideit();

Demo

Upvotes: 1

Related Questions