代码之家  ›  专栏  ›  技术社区  ›  Richard

仅CSS横幅滑块-图像超链接不工作

keyframe css-animations css html
  •  1
  • Richard  · 技术社区  · 9 年前 

    .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>

    我使用这种幻灯片格式在易趣店铺列表上显示横幅。我想让幻灯片链接到商店中的各个页面,但是我试图以传统的方式添加超链接(请参见“img_02”),却完全没有机会使幻灯片可点击。我在这里看到过类似的问题,并尝试了几种不同的“有效”解决方案,但都没有成功。如果有人能就如何解决这个问题提出建议,我们将不胜感激。

    6 回复  |  直到 7 年前
        1
  •  0
  •   Pete Irfan TahirKheli    9 年前

    这似乎是一个z索引问题,也因为你绝对定位你的图像,你的链接将没有高度。 

    .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%;
  }
}
    <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>
        2
  •  0
  •   Awsme Sandy    9 年前

    尝试添加以下css属性

    .zd-slider a { display: inline-block; }

    a 标签没有得到任何宽度或高度,可能无法正确解释您,试试这一个,肯定会工作。

        3
  •  0
  •   Alexis Wollseifen    9 年前

    问题来自您的 position: absolute .

    <a/> 标签不“包含”图像。

    您可以尝试使用静态位置和 transform: translate 动画而不是 opacity 因此图像不需要堆叠。

        4
  •  0
  •   meshin    9 年前 

       #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>
        5
  •  0
  •   Abijith Ajayan    9 年前

    为每个滑块图像创建一个单独的div,并为该公共类div提供Z索引。。。。

        6
  •  0
  •   kastriotcunaku    9 年前

    尝试此解决方案:

    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%;
  }
}
    <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>
    推荐文章
    lineage  ·  docker中五彩纸屑的代码是什么/欢迎来到docker?[关闭]
    1 年前
    mini1012  ·  关键帧css中百分比之间的延迟
    1 年前
    Fernandossmm  ·  element.animate()使用关键帧似乎忽略了放松功能
    2 年前
    goalTosin  ·  当一个项目被删除时,我如何设置侧边栏项目向上滑动的动画?
    2 年前
    Dan  ·  如何设置重置变换的动画:使用CSS关键帧旋转?
    3 年前
    Dan  ·  如何使用Tailwind创建动画序列?
    3 年前
    Thomas Pötz  ·  CSS伪元素的翻译速度快于主元素
    3 年前
    Morteza M  ·  在连续旋转中更改CSS动画持续时间
    3 年前
    Chris Dk  ·  为什么我的html元素在动画后会消失
    3 年前
    dododdo  ·  看到对象后在css中的动画
    3 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号