Question

您好我正在尝试使用HTML5和JavaScript的单独缩略图链接更改图库滑块内的主图像。

  <!DOCTYPE html>
    <html lang="en">
        <head>
          <script src="slider.js" type="text/javascript"></script>
          <title>Gallery Slider</title>
        </head>
                <body>
                  </article>

                    <div id="container">
                     <img src="Fimages/img1.png" name="slideshow" id="img"/>
                          <div id="left_holder">
                            <a href="javascript:void(0);"><img onClick=" slide(-1)" class="left" src="Fimages/arrow_left.png"/></a>
                          </div>
                          <div id="right_holder"> 
                            <a href="javascript:void(0);"><img onClick="slide(1)" class="right" src="Fimages/arrow_right.png"/></a>
                          </div>
                     </div>

                    <div id="description"></div>


                    <a href="javascript:void(0)" onClick="thumbnail(?)">pic 1</a>
                    <a href="javascript:void(0)" onClick="thumbnail(?)">pic 2</a>
                    <a href="javascript:void(0)" onClick="thumbnail(?)">pic 3</a>
                    <a href="javascript:void(0)" onClick="thumbnail(?)">pic 4</a>
                    <a href="javascript:void(0)" onClick="thumbnail(?)">pic 5</a>

                <article> 
            </body>
    </html>

当我来回滑动时，我有一个JavaScript滑块正常工作，但是当我点击单独的缩略图链接时，我无法更改“container”div或“description”div中的主图像。我需要创建另一个功能吗？如果可能的话，我可以在JavaScript中解释，因为我正在努力了解它。请在下面找到我的JavaScript。

   var Image = ["Fimages/img1.png", "Fimages/img2.png","Fimages/img3.png","Fimages/img4.png","Fimages/img5.png"];
   var Description = ["1.description...", "2. description...", "3. description...", "4. description...", "5.description..."];
   var Image_Number = 0;
   var Image_Length = Image.length -1;


   function slide(num){
    Image_Number = Image_Number + num;

     if (Image_Number > Image_Length){
        Image_Number = 0;       
     }

     if (Image_Number < 0){
        Image_Number = Image_Length;
     }

     document.slideshow.src=Image[Image_Number];
     document.getElementById("description").innerHTML = Description[Image_Number];
     return false;
     }

   //Do I need another function to call up an Image and a Description?
    function thumbnail(x){

    }

Answer 1

使用img id

更改图片来源

document.getElementById("img").src="ImageSourceHere.png";

更改ID为description

的div的内容

document.getElementById("description").innerHTML = "your description here";

请参阅here以获取inenrHtml

的文档

请参阅here以获取getElementById

的文档

针对您的具体案例

function thumbnail(x){
    Image_Number = x;
    document.slideshow.src=Image[Image_Number];
    document.getElementById("description").innerHTML = Description[Image_Number];
}

此功能需要检查才能知道if x is >= 0 and x < ImageLength

使用JavaScript单击单独的链接更改图库滑块中的主图像

1 个答案: