1

私は JavaScript を使い始めたばかりで、とても気に入っています。初心者で申し訳ありませんが、私はこれに多くの情熱を持っています。以下は私のコードです。シンプルなスライダーで説明をしたいと思います。アドバイスをいただければ幸いです。ありがとう。

jQueryでより良い結果が得られることはわかっていますが、まず通常の JavaScript を習得したいと考えています。

   var featureImg = document.getElementById("photoSlider");

    var ImgArray = ["image1.png" , "image2.png" , "image3.png", "image4.png", "image5.png"];
    var index = 0;

    function newImage() {
        featureImg.setAttribute("src", ImgArray[index]);
        index++;

        if (index >= ImgArray.length) {
            index = 0;
        }
    }

    setInterval(newImage, 2000);
4

2 に答える 2

0

オブジェクトの配列を使用して、次のようなことを行うことができます。

HTML

<img id="photoSlider"></img>
<div id="photoDescription"></div>

js

var featureImg = document.getElementById("photoSlider");
var imgDescription = document.getElementById("photoDescription");

    var ImgArray = [{src:"http://placehold.it/140x101",desc:"description 1"},
 {src:"http://placehold.it/140x102",desc:"description 2"} ,
 {src:"http://placehold.it/140x103",desc:"description 3"}, 
{src:"http://placehold.it/140x104",desc:"description 4"}, 
{src:"http://placehold.it/140x105",desc:"description 5"}];
    var index = 0;

    function newImage() {
        featureImg.setAttribute("src", ImgArray[index].src);
        imgDescription.innerHTML= ImgArray[index].desc;
        index++;

        if (index >= ImgArray.length) {
            index = 0;
        }
    }

    setInterval(newImage, 2000);

http://jsfiddle.net/u5LtZ/2/

于 2013-11-08T19:17:35.413 に答える