web-dev-qa-db-ja.com

HTMLで画像スライドショーを作成する方法は？

私は自分のウェブ上で画像スライドショーを作りたい、ここに私のコードがある

<head>
<script type="text/javascript">
    var image1 = new Image()
    image1.src = "images/pentagg.jpg"
    var image2 = new Image()
    image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
    <script type="text/javascript">
            function slideit()
            {
                var step=1;
                document.images.slide.src = eval("image"+step+".src")
                if(step<2)
                    step++
                else
                    step=1
                setTimeout("slideit()",2500)
            }
            slideit()
    </script>
</body>

なぜ機能しないのですか？必要な画像を画像フォルダに入れました

javascriptslideshow
13
greenthunder
  1. 関数呼び出しの上に置くことにより、var step = 1をグローバル変数として設定します
  2. セミコロンを入れる

このようになります

<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<2)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>
</body>
13
Jem

コードを最初から記述する代わりに、jqueryプラグインを使用できます。このようなプラグインは、多くの構成オプションも提供できます。

これが私が一番気に入ったものです。

http://www.zurb.com/playground/orbit-jquery-image-slider

3
maximus ツ