1

JavaScriptを使用して画像スライダーを作成しようとしています。

HTML

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

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

脚本

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()

次の画像が2番目に表示され、1番目にスライドし、両方の画像がインラインである必要があるように、2つの画像をスライドさせたいと思いました。

エラーが見つかりません。誰かが私がそれを修正するのを手伝ってもらえますか？

4

2 に答える 2

1

インターネット上にはたくさんの画像スライダーがあります。あなたはそれらをグーグルすることができます。

ただし、上記で作成しているスクリプトは、スライド効果をまったく作成しません。画像を切り替えて、まるでスライドしているかのように見せかけるだけです。

スクリプトの作業バージョンは次のようになります。

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();

デモ

于 2012-05-05T11:32:08.727 に答える