Question

如何添加指向这些图像的链接。我尝试了很多幻灯片的变化，但发现当我添加链接时，它开始不显示所有其他图像。在我下面的代码中，我将链接注释掉了。如果我删除链接，图像显示正常。

我已经重复了两次图片，只是尝试调试并在链接中包含_parent标记，因为此页面将显示在iframe中。

非常感谢您的帮助。感谢您抽出宝贵时间阅读本文。

HTML

<div class="slider">
    <a href="" target="_parent"><img class='photo' src="featuredProducts/On-Semi-Python-sensors-sm.png"/></a>
</div>

CSS

.slider {
    margin: 0;
    width: 180px;
    height: 1504px;
    overflow: hidden;
    position: relative;
}
.photo {
    position: absolute;
    -webkit-animation: round 16s infinite;
    opacity: 0;
    width: 100%;
}
@-webkit-keyframes round {
    25% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
}

.slider img:nth-child(4) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -ms-animation-delay: 12s;
    -o-animation-delay: 12s;
    animation-delay: 12s;
}

.slider img:nth-child(3) {
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -ms-animation-delay: 8s;
    -o-animation-delay: 8s;
    animation-delay: 8s;
}

.slider img:nth-child(2) {
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -ms-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}

.slider img:nth-child(1) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
}

Answer 1

这是因为position: absolute用于photo类的图像。您从position: absolute移除了photo，然后将其添加到a元素中。

.slider a{
    position: absolute;
    display: block;
}
.photo {
    -webkit-animation: round 16s infinite;
    opacity: 0;
    width: 100%;
}

Answer 2

将.slide img替换为.slide a

＆＃13;

.slider {
  margin: 0;
  width: 180px;
  height: 1504px;
  overflow: hidden;
  position: relative;
}

a {
  position: absolute;
  -webkit-animation: round 16s infinite;
  opacity: 0;
}

img {
  width: 100%;
}

@-webkit-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

.slider a:nth-child(4) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

.slider a:nth-child(3) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -ms-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

.slider a:nth-child(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -ms-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

.slider a:nth-child(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

＆＃13;

<div class="slider">
  <a href="cameras/cameras-with-OnSemi-Python-sensors.php" target="_parent"><img class='photo' src="http://i.imgur.com/IMiabf0.jpg" alt="On Semi PYTHON sensors" /></a>

  <a href="cameras/cameras-with-OnSemi-Python-sensors.php" target="_parent"><img class='photo' src="http://i.imgur.com/NqCM7jH.jpg" alt="" /></a>


  <a href="cameras/cameras-with-OnSemi-Python-sensors.php" target="_parent"><img class='photo' src="http://i.imgur.com/cjN8Qoa.jpg" alt="" /></a>


  <a href="cameras/cameras-with-OnSemi-Python-sensors.php" target="_parent"><img class='photo' src="http://i.imgur.com/WQ2RS6O.png" alt="" /></a>


</div>

＆＃13;

Answer 3

您的链接问题是正确的你有锚<img>，但是你试图隐藏img并让它的父锚可见之后，在隐藏左父锚点之前使另一个图像可见是不可能的。因此，您会看到一个空白区域，直到时间过去隐藏此左锚点并且可以显示新的img 解决方法是隐藏每个img的父锚点以获得正确的效果有两个步骤：
HTML：将类照片从img更改为锚点 CSS：将选择器更改为.slider a：nth-child（...）

此修改后的代码适用于

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div class="slider">
<!--
<img class='photo' src="1.jpg" alt="" />
<img class='photo' src="2.jpg" alt="" />
<img class='photo' src="3.jpg" alt="" />
-->
<a class='photo' href="http://www.google.com" target="_parent" ><img         src="1.jpg" alt="On Semi PYTHON sensors" /></a>
<a class='photo' href="http://www.youtube.com" target="_parent" ><img src="2.jpg" alt="" /></a>
<a class='photo' href="http://www.pinterest.com" target="_parent" ><img src="3.jpg" alt="" /></a>
<a class='photo' href="http://www.facebook.com" target="_parent" ><img src="4.jpg" alt="" /></a>

</div>
</body>
</html>

CSS

.slider { margin: 0; width: 180px; height: 1504px; overflow: hidden; position: relative; }
.photo { position: absolute; -webkit-animation: round 16s infinite; opacity: 0; width: 100%; }
@-webkit-keyframes round { 25% { opacity: 1; } 40% { opacity: 0; } }

.slider a:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}

.slider a:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}

.slider a:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}

.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}

Answer 4

以下代码有所帮助。图像显示很好，但我需要链接到图像的单独页面。即使显示另一个图像，第一个链接也是活动的 - 换句话说，链接不是将link2映射到image2，link3与image3 ...

请看下面的内容，如果你知道如何修复它，请告诉我。谢谢！

＆＃13;

.slider {
  margin: 0;
  width: 180px;
  height: 1504px;
  overflow: hidden;
  position: relative;
}

.slider a {
  position: absolute;
  -webkit-animation: round 16s infinite;
  opacity: 0;
}

img {
  width: 100%;
}

@-webkit-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

.slider a:nth-child(4) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

.slider a:nth-child(3) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -ms-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

.slider a:nth-child(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -ms-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

.slider a:nth-child(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

＆＃13;

<div class="slider">
  <a href="link1.php" target="_parent"><img class='photo' src="http://i.imgur.com/IMiabf0.jpg" alt="On Semi PYTHON sensors" /></a>

  <a href="link2.php" target="_parent"><img class='photo' src="http://i.imgur.com/NqCM7jH.jpg" alt="" /></a>


  <a href="link3.php" target="_parent"><img class='photo' src="http://i.imgur.com/cjN8Qoa.jpg" alt="" /></a>


  <a href="link4.php" target="_parent"><img class='photo' src="http://i.imgur.com/WQ2RS6O.png" alt="" /></a>


</div>

＆＃13;

CSS幻灯片 - 如何添加图像链接？

4 个答案: