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 回答
0

只更新

featureImg.src = ImgArray[Index];
于 2013-11-08T19:20:10.840 回答