gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:36:48 26 4
gpt4 key购买 nike

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

我已经重复了两次图像只是为了调试并在链接中包含 _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;
}

最佳答案

问题出在您的链接上。
你有 <img>在 anchor 内,但您尝试隐藏 img 并使其父 anchor 可见。
在隐藏左父 anchor 之前,不可能使另一个图像可见。因此,您会看到一个空白区域,直到时间过去以隐藏此左 anchor 并且可以出现新的 img。
解决方法是隐藏每个img的parent anchor来达到正确的效果。
分为两步:
HTML : 将类(class)照片从 img 更改为 anchor
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;
}

关于CSS 幻灯片 - 如何添加图像链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34622544/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com