Question

我有一个旋转木马：JS Fiddle。我试图弄清楚如何将显示为主图像的每个图像链接到其自己的页面。目前，单击图像会导致维基百科页面，因为这是我在main_image div中指定的链接。

我应该在href中再指定一个<li>吗？我的猜测是我必须在var imgTitle = $(this).find('a').attr("href")的行中在JS中再创建一个变量，但我不确定究竟是多么准确。

＆＃13;

var intervalId;
var slidetime = 2500;
$(document).ready(function() {
  // Comment out this line to disable auto-play
  intervalID = setInterval(cycleImage, slidetime);
  $(".main_image .desc").show(); // Show Banner
  $(".main_image .block").animate({
    opacity: 0.85
  }, 1); // Set Opacity
  $(".image_thumb ul li:first").addClass('active');


  $(".image_thumb ul li").click(function() {
    // Set Variables
    var imgAlt = $(this).find('img').attr("alt"); //  Get Alt Tag of Image
    var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
    var imgDesc = $(this).find('.block').html(); //  Get HTML of block
    var imgDescHeight = $(".main_image").find('.block').height(); // Calculate height of block	

    if ($(this).is(".active")) { // If it's already active, then...
      return false; // Don't click through
    } else {
      // Animate the Teaser				
      $(".main_image .block").animate({
        opacity: 0,
        marginBottom: -imgDescHeight
      }, 250, function() {
        $(".main_image .block").html(imgDesc).animate({
          opacity: 0.85,
          marginBottom: "0"
        }, 250);
        $(".main_image img").attr({
          src: imgTitle,
          alt: imgAlt
        });
      });
    }

    $(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists
    $(this).addClass('active'); // add class of 'active' on this list only
    return false;

  }).hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });

  // Function to autoplay cycling of images
  function cycleImage() {
    var onLastLi = $(".image_thumb ul li:last").hasClass("active");
    var currentImage = $(".image_thumb ul li.active");


    if (onLastLi) {
      var nextImage = $(".image_thumb ul li:first");
    } else {
      var nextImage = $(".image_thumb ul li.active").next();
    }

    $(currentImage).removeClass("active");
    $(nextImage).addClass("active");

    // Duplicate code for animation
    var imgAlt = $(nextImage).find('img').attr("alt");
    var imgTitle = $(nextImage).find('a').attr("href");
    var imgDesc = $(nextImage).find('.block').html();
    var imgDescHeight = $(".main_image").find('.block').height();

    $(".main_image .block").animate({
      opacity: 0,
      marginBottom: -imgDescHeight
    }, 250, function() {
      $(".main_image .block").html(imgDesc).animate({
        opacity: 0.85,
        marginBottom: "0"
      }, 250);
      $(".main_image img").attr({
        src: imgTitle,
        alt: imgAlt
      });
    });
  };

});

＆＃13;

.features {
  flex: 1;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  /* 	  width: 60%;  */
  min-width: 62.4%;
  max-width: 62.4%;
  margin-right: 0;
  padding-right: 0;
  position: relative;
}
.main_image {
  flex: 1 0 auto;
  min-width: 72.3%;
  max-width: 72.3%;
  margin-right: 0;
  height: 400px;
  float: left;
  background: #333;
  position: relative;
  overflow: hidden;
  color: #fff;
  padding-bottom: 10px;
  padding-right: 0;
  /* 						border-top: 5px solid blue; */
  /* 						border-right: 5px solid red;
 */
}
.main_image img {
  margin-right: 0;
  max-height: 475px;
  padding-right: 0;
  max-width: 610px;
}
.main_image h2 {
  font-size: 2em;
  font-weight: normal;
  margin: 0 0 5px;
  padding: 10px;
  padding-bottom: 0px;
  line-height: 1.2em;
  /* 	font-variant: small-caps; */
  font-family: Open Sans;
  font-style: italic;
}
.block small {
  padding: 0 0 5px 5px;
  background: url(images/icon_cal.gif) no-repeat 0 center;
  font-size: 1em;
}
.main_image .block small {
  margin-left: 5px;
}
.main_image .desc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: none;
}
.main_image .block {
  width: 100%;
  background: #111;
  border-top: 1px solid #000;
  padding-bottom: 8px;
}
.image_thumb {
  float: left;
  margin-right: 0;
  padding-right: 0;
  margin-left: 0;
  padding-left: 0;
  width: 223px;
  height: 40px;
  background: #f0f0f0;
  /* 						border-right: 1px solid #fff; */
  border-top: 1px solid #ccc;
  flex: 1;
}
.image_thumb ul {
  margin: 0;
  padding: 0;
  list-style: none;
  /* 						border: 4px solid green;	
 */
}
.image_thumb ul li {
  margin: 0;
  padding: 12px 10px;
  background-color: #f0f0f0;
  min-width: 213px;
  height: 56.2px;
  float: left;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #fff;
  border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
  background: #ddd;
  cursor: pointer;
}
.image_thumb ul li.active {
  background: #fff;
  cursor: default;
}
.image_thumb ul li h2 {
  font-size: 1.5em;
  margin: 5px 0;
  padding: 0;
  line-height: 1.2em;
  /* 	font-variant: small-caps; */
  font-family: Open Sans;
  font-style: italic;
}
.image_thumb ul li .block {
  float: left;
  margin-left: 10px;
  padding: 0;
  width: 180px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="features">

  <span class="sticker">
					<img class="tab1special" src="images/featurestab.png" alt="main">
							</span>

  <div class="main_image">
    <a href="https://www.wikipedia.org">
      <img src="https://upload.wikimedia.org/wikipedia/commons/e/e9/Baker's-van-r.jpg" />
    </a>
    <div class="desc">
      <div class="block">
      </div>
    </div>
    <h2>Wagon wins again</h2>
  </div>


  <div class="image_thumb">
    <ul>

      <li>
        <a href="https://upload.wikimedia.org/wikipedia/commons/e/e9/Baker's-van-r.jpg"></a>
        <div class="block">
          <h2>Wagon wins again</h2>
        </div>
      </li>
      <li>
        <a href="https://s-media-cache-ak0.pinimg.com/736x/00/60/ff/0060ff20d110050c0e350c55f7c7f3be.jpg"></a>
        <div class="block">
          <h2>Heirloom Scareloom</h2>

        </div>
      </li>
      <li>
        <a href="https://upload.wikimedia.org/wikipedia/commons/7/79/Mammuthus_trogontherii122DB.jpg"></a>
        <div class="block">
          <h2>The Original Wollies</h2>
          <br>

        </div>
      </li>
      <li>
        <a href="images/booksleeve2.jpg"></a>
        <div class="block">
          <h2>Tales from the West</h2>
          <br>

        </div>
      </li>
      <li>
        <a href="images/spiceroute.jpg"></a>
        <div class="block">
          <h2>A Journey through Time</h2>
          <br>
        </div>
      </li>
    </ul>
  </div>

</section>

＆＃13;

Answer 1

您无法在同一元素上创建两个超链接。浏览器如何知道要关注哪个链接？为什么不使用该链接创建一个单独的文本元素来记入维基百科页面，并使用图像div作为页面链接？

Answer 2

图片不能是链接。但是你可以使用jQuery非常轻松地用链接包装图像。您当前的代码有：

$(".main_image img").attr({ src: imgTitle , alt: imgAlt});

设置当前图像的源文本和替换文本。如果要将该图像包装在链接中，可以执行以下操作：

$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).wrap($('<a>',{
     href: imgTitle // over whatever URL you like
  }));

这将img标记包装在一个链接中。目前它只链接到图像源，但您可以将其更改为任何内容。

如何双重链接图像

2 个答案: