Question

我制作了一个纯粹的CSS幻灯片，它可以旋转图像。但我也希望这些图片是可点击的链接，将您带到网站的相关页面以及我遇到问题的地方。

图像确实显示为链接，但它们都指向第4张幻灯片的网址，我无法弄清楚需要更改的内容，以使链接与其对应的图像一致旋转。 / p>

更新：当我按照用户45250的回答更改z-index时，它会使所有图片指向第一张幻灯片的链接，而不是最后一张幻灯片。但我需要每个图像指向不同的页面。

更新2：我非常确定z-index以某种方式与问题相关，我现在能够获得旋转的链接。我将每个图像的z-index设置为4，其不透明度设置为1而不是0（请参阅下面的更新代码）但是链接仍然赢了＆＃39; t与图像同步。现在，当幻灯片加载时，链接会在第一个图像仍处于运行状态时快速循环显示所有四个，然后在第四个链接处停止，直到幻灯片重新开始。我还能改变什么才能让它发挥作用？

这是我的HTML：

<div id="show">
   <a href="newproduct.html" class="img1 slide"><div>
    <img class="slideimg" src="images/new.png" alt="New Product"></div>
   </a>
   <a href="joinlist.html" class="img2 slide"><div>
    <img class="slideimg" src="images/mailinglist.png" alt="Join Our Mailing List!"></div>
   </a>
   <a href="firesale.html" class="img3 slide"><div>
     <img class="slideimg" src="images/firesale.png" alt="Shop the Fire Sale"></div>
   </a>
   <a href="giftcards.html" class="img4 slide"><div>
     <img class="slideimg" src="images/giftcards.png" alt="Buy Gift Cards"></div>
   </a>
</div>

更新 CSS：

/* slideshow frame */


    #show {
      display:block;
        margin:0px;
        position: relative;
        padding:0px;
        border: 3px solid #000000;
        z-index:1;
    }

    #show .slide {
        position: absolute;
        overflow: hidden;
        text-align: center;
    }

.img1 {
animation: img1 40s infinite;
-o-animation: img1 40s infinite;
-moz-animation: img1 40s infinite;
-webkit-animation: img1 40s infinite;
}

.img2 {
animation:img2 40s infinite;
o animation: img2 40s infinite;
moz animation: img2 40s infinite;
-webkit-animation: img2 40s infinite;
}

.img3 {
animation:img3 40s infinite;
o animation: img3 40s infinite;
moz animation: img3 40s infinite;
-webkit-animation: img3 40s infinite;
}

.img4 {
animation:img4 40s infinite;
o animation: img4 40s infinite;
moz animation: img4 40s infinite;
-webkit-animation: img4 40s infinite;
}

/* keyframing */

@-webkit-keyframes img1 {
0% {opacity: 0;}
25% {opacity: 1;
z-index:4;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img1 {
0% {opacity: 0;}
25% {opacity: 1;
z-index:4;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img1 {
0% {opacity: 0;}
25% {opacity: 1;
z-index:4;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes img2 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 1;
z-index:4;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img2 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 1;
z-index:4;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img2 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 1;
z-index:4;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes img3 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 1;
z-index:4;}
100% {opacity: 0;}
}

@keyframes img3 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 1;
z-index:4;}
100% {opacity: 0;}
}

@-moz-keyframes img3 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 1;
z-index:4;}
100% {opacity: 0;}
}

@-webkit-keyframes img4 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 1;
z-index:4;}
}

@keyframes img4 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 1;
z-index:4;}
}

@-moz-keyframes img4 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 1;
z-index:4;}
}

知道我哪里出错了吗？

Answer 1

没有测试你的代码，但是你可以尝试添加z-index来为每个img设置排序：

function tryThis(element){
    if(element.checked){
        element.classList.add("marked_" + element.name);
    }else{
        element.classList.remove("marked_" + element.name);
    }

    if(document.getElementsByClassName("marked_" + element.name).length>1){
      alert("Please select only one " + element.name + " check box");
        element.checked=false;
        element.classList.remove("marked_" + element.name);
    }
    if(document.getElementsByClassName("marked_" + element.name).length==0){
         alert("Please select one " + element.name + " check box");
    }
}

从.img1 { z-index:4; } .img2 { z-index:3; } .img3 { z-index:2; } .img4 { z-index:1; }到img1到img2

给出最高的数字img4.

如何将CSS幻灯片中的每个图像链接到我网站上的其他页面？

1 个答案: