0

HTMLでスライドショーを正常に作成できますが、2つ作成しようとしても機能しません。コードは次のとおりです。

<script type="text/javascript">
var image1 = new Image()
image1.src = "img/home/residential.gif"
var image2 = new Image()
image2.src = "img/home/1.gif"
var image3 = new Image()
image3.src = "img/home/2.gif"
</script>

<table align="center" width="70%"cellpadding=5 cellspacing=5>

<tr>
    <td rowspan=2 align=center><a href="artistic.html"><figure><img src="logo1.gif" alt="Atristic Impressions" width="400" height="600" name="slide"/><figcaption style="color: #610B21">Artistic Impressions</figure></td>
    <script type="text/javascript">
            var step=1;
        function slide()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<3)
                step++;
            else
                step=1;
            setTimeout("slide()",5000);
        }
        slide();
</script>

<script type="text/javascript">
    var image1 = new Image()
    image1.src = "img/barns/1.gif"
    var image2 = new Image()
    image2.src = "img/barns/2.gif"
    var image3 = new Image()
    image3.src = "img/barns/3.gif"
    var image4 = new Image()
    image4.src = "img/barns/4.gif"
</script>
<td align=center><a href="Barns.html"><figure><img src="img/barns/1.gif" alt="Barn Conversions" width="400" height="300" name="slide"/ ><figcaption style="color: #610B21">Barn Conversions</figure></td>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image1"+step+".src");
            if(step<3)
                step++;
            else
                step=1;
            setTimeout("slideit()",5000);
        }
        slideit();
</script>
4

2 に答える 2

0

何が起こっているかというと、それ自体と競合するコードを使用しているということです。グローバル レベルでイメージを定義し、後で 2 番目のショーをセットアップするときにそれらを再定義しました。ステップ変数も複製しましたが、同じ値を使用する場合、これはそれほど重要ではありません。また、両方のスライダー スクリプトを使用して同じ画像に影響を与えているため、一方のターゲットを変更する必要があります。これを回避するより適切な方法は、いくつかのパラメーターを追加する単一の関数を使用して、画像と DOM 要素の両方のセットを処理できるようにすることです。

何かのようなもの：-

function slide( image_id, image_array) {

     myImage = getElementById(image_id);
     myImage.src = image_array[step];

}

もちろん、それだけではありません。2 つの個別のインスタンスを実行できる、優れた注目の画像スライダーの例がたくさんあります。それらのいくつかを勉強することをお勧めします。

于 2013-09-17T13:22:37.787 に答える