.zd-slider { position:relative; overflow:hidden; margin-top: 0px; }
.zd-slider img[id*="img"] {width:100%; position:absolute; left:0; top:0; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
/* set the width/height of the slideshow */
.zd-slider img#blank {display:block; width:100%; visibility:hidden;}
/* the slideshow */
.zd-slider #img_01 {-webkit-animation:autoplay 9s linear infinite 0s; animation:autoplay 9s linear infinite 0s;}
.zd-slider #img_02 {-webkit-animation:autoplay 9s linear infinite 3s; animation:autoplay 9s linear infinite 3s;}
.zd-slider #img_03 {-webkit-animation:autoplay 9s linear infinite 6s; animation:autoplay 9s linear infinite 6s; }
@-webkit-keyframes autoplay {
4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
}
@keyframes autoplay {
4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
}
/* the slide timing indicator */
.zd-slider #slide {width:98px; height:5px; position:absolute; left:0; bottom:0; background:rgba(255,255,255,0.5);
-webkit-animation:slide 3s linear infinite; animation:slide linear 3s infinite;}
@keyframes slide {
0% {left:-100px;}
100% {left:100%;}
}
@-webkit-keyframes slide {
0% {left:-100px;}
100% {left:100%;}
}
<div class="zd-container" id="zd-collection2"> <div class="zd-slider">
<img id="blank" src="http://via.placeholder.com/1440x133" alt="" />
<img id="img_01" src="http://via.placeholder.com/1440x133" alt="" />
<a href="http://www.google.com">
<img id="img_02" src="http://via.placeholder.com/1440x133" alt="" /></a>
<img id="img_03" src="http://via.placeholder.com/1440x133" alt="" /> <div id="slide"></div> </div> </div>
我正在使用此幻灯片格式在eBay商店列表中显示横幅。我希望将幻灯片链接到商店中的各个页面,但是我尝试以传统方式添加超链接(请参阅“img_02”),并且绝对没有运气使幻灯片可以点击。我在这里看过类似的问题并尝试了一些不同的“工作”解决方案,但没有任何运气。如果有人可以就如何解决这个问题提出建议,那将非常感激。
答案 0 :(得分:0)
尝试添加以下css属性
.zd-slider a {
display: inline-block;
}
由于a
标签没有获得任何宽度或高度,可能无法正确解释您,尝试这个并且肯定会有效。
答案 1 :(得分:0)
似乎是一个z-index问题,也因为你绝对定位你的图像,你的链接将没有高度。
在下面,我已经将图像包裹在跨度中并定位而不是图像(与锚相同的类以便也定位)并为动画添加一些z-index(代码中的注释)。
.zd-slider {
position: relative;
overflow: hidden;
margin-top: 0px;
}
.zd-slider .container { /* move this from image to new container span / link */
display: block;
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.zd-slider img {
display: block;
width: 100%;
}
/* set the width/height of the slideshow */
.zd-slider #blank {
visibility: hidden;
pointer-events: none; /* I added this in case it appeared on top of the absolute positioned elements - it shouldn't but just to be safe */
}
/* the slideshow */
.zd-slider #img_01 {
-webkit-animation: autoplay 9s linear infinite 0s;
animation: autoplay 9s linear infinite 0s;
}
.zd-slider #img_02 {
-webkit-animation: autoplay 9s linear infinite 3s;
animation: autoplay 9s linear infinite 3s;
}
.zd-slider #img_03 {
-webkit-animation: autoplay 9s linear infinite 6s;
animation: autoplay 9s linear infinite 6s;
}
@-webkit-keyframes autoplay {
4%,
33% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
z-index: 2; /* add this to make sure visible item has a higher z-index that none visible items */
}
0%,
37%,
100% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
z-index: 1; /* add this to make sure visible item has a higher z-index that none visible items */
}
}
@keyframes autoplay {
4%,
33% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
z-index: 2; /* add this to make sure visible item has a higher z-index that none visible items */
}
0%,
37%,
100% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
] z-index: 1; /* add this to make sure visible item has a higher z-index that none visible items */
}
}
/* the slide timing indicator */
.zd-slider #slide {
width: 98px;
height: 5px;
position: absolute;
left: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.5);
-webkit-animation: slide 3s linear infinite;
animation: slide linear 3s infinite;
z-index: 3; /* make slider appear above images */
}
@keyframes slide {
0% {
left: -100px;
}
100% {
left: 100%;
}
}
@-webkit-keyframes slide {
0% {
left: -100px;
}
100% {
left: 100%;
}
}
&#13;
<div class="zd-container" id="zd-collection2">
<div class="zd-slider">
<!-- sizing div doesn't need container class-->
<span id="blank"><img src="http://via.placeholder.com/1440x133" alt="" /></span>
<span class="container" id="img_01"><img src="http://via.placeholder.com/1440x133" alt="" /></span>
<a href="http://www.google.com" class="container" id="img_02"><img src="http://via.placeholder.com/1440x135" alt="" /></a>
<span class="container" id="img_03"><img src="http://via.placeholder.com/1440x133" alt="" /></span>
<div id="slide"></div>
</div>
</div>
&#13;
答案 2 :(得分:0)
这样做,需要将位置,宽度,高度和z-index应用到链接中:
#img_02_link{
position: absolute;
top:0; left:0;
width: 100%;
height: 100%;
z-index:1;
}
.zd-slider { position:relative; overflow:hidden; margin-top: 0px; }
.zd-slider img[id*="img"] {width:100%; position:absolute; left:0; top:0; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
/* set the width/height of the slideshow */
.zd-slider img#blank {display:block; width:100%; visibility:hidden;}
/* the slideshow */
.zd-slider #img_01 {-webkit-animation:autoplay 9s linear infinite 0s; animation:autoplay 9s linear infinite 0s;}
.zd-slider #img_02 {-webkit-animation:autoplay 9s linear infinite 3s; animation:autoplay 9s linear infinite 3s;}
.zd-slider #img_03 {-webkit-animation:autoplay 9s linear infinite 6s; animation:autoplay 9s linear infinite 6s; }
@-webkit-keyframes autoplay {
4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
}
@keyframes autoplay {
4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
}
/* the slide timing indicator */
.zd-slider #slide {width:98px; height:5px; position:absolute; left:0; bottom:0; background:rgba(255,255,255,0.5);
-webkit-animation:slide 3s linear infinite; animation:slide linear 3s infinite;}
@keyframes slide {
0% {left:-100px;}
100% {left:100%;}
}
@-webkit-keyframes slide {
0% {left:-100px;}
100% {left:100%;}
}
<div class="zd-container" id="zd-collection2"> <div class="zd-slider">
<img id="blank" src="http://via.placeholder.com/1440x133" alt="" />
<img id="img_01" src="http://via.placeholder.com/1440x133" alt="" />
<a id="img_02_link" href="http://www.google.com" target="_blank">
<img id="img_02" src="http://via.placeholder.com/1440x133" alt="" />
</a>
<img id="img_03" src="http://via.placeholder.com/1440x133" alt="" />
<div id="slide"></div>
</div>
</div>
答案 3 :(得分:0)
为每个滑块图像创建一个单独的div,并为该公共类div提供Z-index ....
答案 4 :(得分:0)
试试这个解决方案:
演示:https://jsfiddle.net/yc07b60j/
.zd-slider {
position: relative;
overflow: hidden;
margin-top: 0px;
}
.zd-slider a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.zd-slider img[id*="img"] {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
/* set the width/height of the slideshow */
.zd-slider img#blank {
display: block;
width: 100%;
visibility: hidden;
}
/* the slideshow */
.zd-slider #img_01 {
-webkit-animation: autoplay 9s linear infinite 0s;
animation: autoplay 9s linear infinite 0s;
}
.zd-slider #img_02 {
-webkit-animation: autoplay 9s linear infinite 3s;
animation: autoplay 9s linear infinite 3s;
}
.zd-slider #img_03 {
-webkit-animation: autoplay 9s linear infinite 6s;
animation: autoplay 9s linear infinite 6s;
}
@-webkit-keyframes autoplay {
4%,
33% {
z-index: 2;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
0%,
37%,
100% {
z-index: 1;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
@keyframes autoplay {
4%,
33% {
z-index: 2;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
0%,
37%,
100% {
z-index: 1;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
/* the slide timing indicator */
.zd-slider #slide {
width: 98px;
height: 5px;
position: absolute;
left: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.5);
-webkit-animation: slide 3s linear infinite;
animation: slide linear 3s infinite;
}
@keyframes slide {
0% {
left: -100px;
}
100% {
left: 100%;
}
}
@-webkit-keyframes slide {
0% {
left: -100px;
}
100% {
left: 100%;
}
}
&#13;
<div class="zd-container" id="zd-collection2">
<div class="zd-slider">
<img id="blank" src="http://via.placeholder.com/1440x133/f44242/ffffff" alt="" />
<img id="img_01" src="http://via.placeholder.com/1440x133/86f441/ffffff" alt="" />
<a href="http://www.google.com">
<img id="img_02" src="http://via.placeholder.com/1440x133/f44242/ffffff" alt="" />
</a>
<img id="img_03" src="http://via.placeholder.com/1440x133/41aff4/ffffff" alt="" />
</div>
</div>
&#13;