HTML和JavaScript图像幻灯片仅链接到相同的超链接，而不是每个图像的不同超链接

我正在用HTML创建一个图像幻灯片，我希望每个图像链接到不同的网页，每个图像显示不同的标题/alt标记。然而，我使用的代码只给了我一个链接和一个标题，而不是不同的

我现在已经尝试了很多方法，但似乎都不管用。我现在将以不同的方式发布第一种方式和第二种方式，这样我们就不会感到困惑

在html文件中，代码如下所示：

div id="slideShowImages">
    <a href = "civil_war.html"><img src="Images/civil_war.jpg" alt = "Captain America: Civil War" title = "Captain America: Civil War"/></a>
    <a href = "agents_of_shield.html"><img src = "Images/agents_of_shield.jpg" alt = "Agents of Shield" title="Agents of Shield"/> </a>
    <a href = "fantastic_four.html"><img src = "Images/fantastic_four.jpg" alt ="The Fantastic Four" title = "The Fantastic Four"/></a>
    <a href = "jurassic_world.html"><img src = "Images/jurassic_world.jpg" alt = "Jurassic World" title = "Jurassic World"/></a>
    <a href = "Furious_7.html"><img src="Images/paul_walker.jpg" alt = "Paul Walker in Furious 7" title = "Paul Walker in Furious 7"/></a>
</div>
<script src="slideShow.js"></script>

divid=“slideShowImages”>

slideShow.js中的代码如下：

    window.addEventListener('load', slideShow, false);

    function slideShow() {



    var globals = {
    slideDelay: 6000, // The time interval between consecutive slides.
    fadeDelay: 35, // The time interval between individual opacity changes. This  should always be much smaller than slideDelay.  
    wrapperID: "slideShowImages", // The ID of the <div> element that contains all of the <img> elements to be shown as a slide show.
    buttonID: "slideShowButton", // The ID of the <button> element that toggles the slide show on and off.
    buttonStartText: "Start Slides", // Text used in the slide show toggle button.
    buttonStopText: "Stop Slides", // Text used in the slide show toggle button.    
    wrapperObject: null, // Will contain a reference to the <div> element that contains all of the <img> elements to be shown as a slide show.
    buttonObject: null, // If present, will contain a reference to the <button> element that toggles the slide show on and off. The initial assumption is that there is no such button element (hence the false value).
    slideImages: [], // Will contain all of the slide image objects.
    slideShowID: null, // A setInterval() ID value used to stop the slide show.
    slideShowRunning: true, // Used to record when the slide show is running and when it's not. The slide show is always initially running.    
    slideIndex: 0 // The index of the current slide image.
  }

  /* MAIN *************************************************************************************************/

  initializeGlobals();  

  if ( insufficientSlideShowMarkup() ) {
    return; // Insufficient slide show markup - exit now.
  }

   // Assert: there's at least one slide image.

  if (globals.slideImages.length == 1) {
    return; // The solo slide image is already being displayed - exit now.
  }

  // Assert: there's at least two slide images.

  initializeSlideShowMarkup();

  globals.wrapperObject.addEventListener('click', toggleSlideShow, false); // If the user clicks a slide show image, it toggles the slide show on and off.

  if (globals.buttonObject) {
    globals.buttonObject.addEventListener('click', toggleSlideShow, false); // This callback is used to toggle the slide show on and off.
  } 

  startSlideShow();

  /* FUNCTIONS ********************************************************************************************/

  function initializeGlobals() {   
    globals.wrapperObject = (document.getElementById(globals.wrapperID) ? document.getElementById(globals.wrapperID) : null);
    globals.buttonObject = (document.getElementById(globals.buttonID) ? document.getElementById(globals.buttonID) : null);   

    if (globals.wrapperObject) {
      globals.slideImages = (globals.wrapperObject.querySelectorAll('img') ? globals.wrapperObject.querySelectorAll('img') : []);
    }
  } // initializeGlobals

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function insufficientSlideShowMarkup() {
    if (!globals.wrapperObject) { // There is no wrapper element whose ID is globals.wrapperID - fatal error.
      if (globals.buttonObject) {
        globals.buttonObject.style.display = "none"; // Hide the not needed slide show button element when present.
      }
      return true;
    }

    if (!globals.slideImages.length) { // There needs to be at least one slide <img> element - fatal error.
      if (globals.wrapperObject) {
        globals.wrapperObject.style.display = "none"; // Hide the not needed <div> wrapper element.
      }

      if (globals.buttonObject) {
        globals.buttonObject.style.display = "none"; // Hide the not needed slide show button element.
      }

      return true;
    }

    return false; // The markup expected by this library seems to be present.
  } // insufficientSlideShowMarkup

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function initializeSlideShowMarkup() {  
    var slideWidthMax = maxSlideWidth(); // Returns a value that is always in pixel units.
    var slideHeightMax = maxSlideHeight(); // Returns a value that is always in pixel units.

    globals.wrapperObject.style.position = "relative";
    globals.wrapperObject.style.overflow = "hidden"; // This is just a safety thing.
    globals.wrapperObject.style.width = slideWidthMax + "px";
    globals.wrapperObject.style.height = slideHeightMax + "px";

    var slideCount = globals.slideImages.length;
    for (var i = 0; i < slideCount; i++) { 
      globals.slideImages[i].style.opacity = 0;
      globals.slideImages[i].style.position = "absolute";
      globals.slideImages[i].style.top = (slideHeightMax - globals.slideImages[i].getBoundingClientRect().height) / 2 + "px";   
      globals.slideImages[i].style.left = (slideWidthMax - globals.slideImages[i].getBoundingClientRect().width) / 2 + "px";               
    }

    globals.slideImages[0].style.opacity = 1; // Make the first slide visible.

    if (globals.buttonObject) {
      globals.buttonObject.textContent = globals.buttonStopText;
    }
  } // initializeSlideShowMarkup

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function maxSlideWidth() {
    var maxWidth = 0;
    var maxSlideIndex = 0;
    var slideCount = globals.slideImages.length;

    for (var i = 0; i < slideCount; i++) {
      if (globals.slideImages[i].width > maxWidth) {
        maxWidth = globals.slideImages[i].width; // The width of the widest slide so far.
        maxSlideIndex = i; // The slide with the widest width so far.
      }
    }

    return globals.slideImages[maxSlideIndex].getBoundingClientRect().width; // Account for the image's border, padding, and margin values. Note that getBoundingClientRect() is always in units of pixels.
  } // maxSlideWidth

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function maxSlideHeight() {
    var maxHeight = 0;
    var maxSlideIndex = 0;    
    var slideCount = globals.slideImages.length;

    for (var i = 0; i < slideCount; i++) {
      if (globals.slideImages[i].height > maxHeight) {
        maxHeight = globals.slideImages[i].height; // The height of the tallest slide so far.
        maxSlideIndex = i; // The slide with the tallest height so far.
      }
    }

    return globals.slideImages[maxSlideIndex].getBoundingClientRect().height; // Account for the image's border, padding, and margin values. Note that getBoundingClientRect() is always in units of pixels.
  } // maxSlideHeight

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function startSlideShow() {
    globals.slideShowID = setInterval(transitionSlides, globals.slideDelay);                
  } // startSlideShow

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function haltSlideShow() {
    clearInterval(globals.slideShowID);   
  } // haltSlideShow

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function toggleSlideShow() {
    if (globals.slideShowRunning) {
      haltSlideShow();
      if (globals.buttonObject) { 
        globals.buttonObject.textContent = globals.buttonStartText; 
      }
    }
    else {
      startSlideShow();
      if (globals.buttonObject) { 
        globals.buttonObject.textContent = globals.buttonStopText; 
      }            
    }
    globals.slideShowRunning = !(globals.slideShowRunning);
  } // toggleSlideShow

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function transitionSlides() {
    var currentSlide = globals.slideImages[globals.slideIndex];

    ++(globals.slideIndex);
    if (globals.slideIndex >= globals.slideImages.length) {
      globals.slideIndex = 0;
    }

    var nextSlide = globals.slideImages[globals.slideIndex];

    var currentSlideOpacity = 1; // Fade the current slide out.
    var nextSlideOpacity = 0; // Fade the next slide in.
    var opacityLevelIncrement = 1 / globals.fadeDelay;
    var fadeActiveSlidesID = setInterval(fadeActiveSlides, globals.fadeDelay);

    function fadeActiveSlides() {
      currentSlideOpacity -= opacityLevelIncrement;
      nextSlideOpacity += opacityLevelIncrement;

      // console.log(currentSlideOpacity + nextSlideOpacity); // This should always be very close to 1.

      if (currentSlideOpacity >= 0 && nextSlideOpacity <= 1) {
        currentSlide.style.opacity = currentSlideOpacity;
        nextSlide.style.opacity = nextSlideOpacity; 
      }
      else {
        currentSlide.style.opacity = 0;
        nextSlide.style.opacity = 1; 
        clearInterval(fadeActiveSlidesID);
      }        
    } // fadeActiveSlides
  } // transitionSlides

} // slideShow

window.addEventListener（'load'，slideShow，false）；
函数幻灯片（）{
变量全局={
slideDelay:6000，//连续幻灯片之间的时间间隔。
fadeDelay:35，//单个不透明度更改之间的时间间隔。这应该总是比slideDelay小得多。
wrapperID:“slideShowImages”//包含要作为幻灯片放映显示的所有元素的元素的ID。
buttonID:“slideShowButton”，//用于打开和关闭幻灯片放映的元素的ID。
buttonStartText:“开始幻灯片”//幻灯片放映切换按钮中使用的文本。
buttonStopText：“停止幻灯片”，//幻灯片放映切换按钮中使用的文本。
wrapperObject:null，//将包含对元素的引用，该元素包含要作为幻灯片放映显示的所有元素。
buttonObject:null，//如果存在，将包含对切换幻灯片放映的元素的引用。最初的假设是不存在此类button元素（因此为假值）。
SlideImage:[]，//将包含所有幻灯片图像对象。
slideShowID:null，//用于停止幻灯片放映的setInterval（）ID值。
slideShowRunning:true，//用于记录幻灯片放映正在运行和未运行的时间。幻灯片放映始终在最初运行。
slideIndex:0//当前幻灯片图像的索引。
}
/*主要*************************************************************************************************/
初始化全局（）；
if（不足的SlideshowMarkup（））{
return；//幻灯片放映标记不足-立即退出。
}
//断言：至少有一张幻灯片图像。
if（globals.slidemages.length==1）{
return；//已显示单张幻灯片图像-立即退出。
}
//断言：至少有两张幻灯片图像。
初始化SlideShowMarkup（）；
globals.wrapperObject.addEventListener（'click'，toggleSlideShow，false）；//如果用户单击幻灯片放映图像，它将打开和关闭幻灯片放映。
if（全局按钮对象）{
globals.buttonObject.addEventListener（'click'，toggleSlideShow，false）；//此回调用于打开和关闭幻灯片放映。
} 
startSlideShow（）；
/*功能********************************************************************************************/
函数initializeGlobals（）{
globals.wrapperObject=（document.getElementById（globals.wrapperID）？document.getElementById（globals.wrapperID）：null）；
globals.buttonObject=（document.getElementById（globals.buttonID）？document.getElementById（globals.buttonID）：null）；
if（globals.wrapperObject）{
globals.slidemages=（globals.wrapperObject.queryselectoral（'img'）？globals.wrapperObject.queryselectoral（'img'）：[]）；
}
}//初始化全局
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
函数不足SlideshowMarkup（）{
如果（！globals.wrapperObject）{//没有ID为globals.wrapperID的包装器元素-致命错误。
if（全局按钮对象）{
globals.buttonObject.style.display=“none”//隐藏不需要的幻灯片放映按钮元素（如果存在）。
}
返回true；
}
如果（！globals.slideImages.length）{//至少需要一个幻灯片元素-致命错误。
if（globals.wrapperObject）{
globals.wrapperObject.style.display=“none”//隐藏不需要的包装器元素。
}
if（全局按钮对象）{
globals.buttonObject.style.display=“none”//隐藏不需要的幻灯片放映按钮元素。
}
返回true；
}
return false；//此库所需的标记似乎存在。
}//幻灯片显示标记不足
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
函数初始值SlideShowMarkup（）{
var slideWidthMax=maxSlideWidth（）；//返回始终以像素为单位的值。
var slideHeightMax=maxlideheight（）；//返回一个始终以像素为单位的值。
globals.wrapperObject.style.position=“relative”；
globals.wrapperObject.style.overflow=“hidden”//这只是一个安全问题。
globals.wrapperObject.style.width=slideWidthMax+“px”；
globals.wrapperObject.style.height=slideHeightMax+“px”；
var slideCount=globals.slidemages.length；
对于（var i=0；i