Question

我开始使用JavaScript，我真的很喜欢使用它。我为一个菜鸟道歉，但我对此有很多热情。这是我的代码如下。我想用简单的滑块进行描述。任何意见，将不胜感激。感谢。

note 我知道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);

Answer 1

您可以使用一组对象并执行类似的操作

<强> 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/

Answer 2

仅更新

featureImg.src = ImgArray[Index];

制作一个简单的JavaScript Slider，如何为我的图像添加描述？

2 个答案: