制作背景幻灯片图片单独可点击

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试为我的摄影作品组合制作背景图片幻灯片。 当每个图像淡入时，我希望它链接到其各自的画廊。 我也有一个文本框，淡入图像。我也想链接到相应的画廊。我还没有添加代码，因为我不知道如何破坏所有链接到代码的代码。 目前，无论我在哪里放置链接，它们都会重叠，并且底部（link3）只能点击。制作背景幻灯片图片单独可点击

我的HTML：

<ul class="cb-slideshow"> 
<li> 
    <span><a id="gallerylink" href="link1"></a></span> 
    <div> 
     <h3>Fire &amp; Light</h3> 
    </div> 
</li> 
<li> 
<span><a id="gallerylink" href="link2"></a></span> 
    <div> 
     <h3>Live Music</h3> 
    </div> 
</li> 
<li> 
<span><a id="gallerylink" href="link3"></a></span> 
    <div> 
     <h3>Water &amp; Nature</h3> 
    </div> 
</li> 
</ul>

我的CSS：

#gallerylink { 
position: absolute; 
display: block; 
width: 100%; 
height: 100%; 
background-color: transparent; 
z-index: 999; 
} 
.cb-slideshow, 
.cb-slideshow:after { 
position: fixed; 
width: 100%; 
height: 100%; 
top: 0px; 
left: 0px; 
z-index: 0; 
list-style-type: none; 
} 
.cb-slideshow li span { 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0px; 
left: 0px; 
color: transparent; 
background-size: cover; 
background-position: 50% 50%; 
background-repeat: none; 
opacity: 0; 
z-index: 0; 
animation: imageAnimation 18s linear infinite 0s; 
} 
.cb-slideshow li div { 
z-index: 1000; 
position: absolute; 
bottom: 5%; 
right:5%; 
width: 10%; 
text-align: center; 
opacity: 0; 
color: #fff; 
animation: titleAnimation 18s linear infinite 0s; 
} 
.cb-slideshow li div h3 { 
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
font-size: 25px; 
font-weight: 400; 
letter-spacing: 2px; 
padding: 0; 
background-color: white; 
line-height: 45px; 
} 
.cb-slideshow li:nth-child(1) span { 
background-image: url(iamge1) 
} 
.cb-slideshow li:nth-child(2) span { 
background-image: url(image2); 
animation-delay: 6s; 
} 
.cb-slideshow li:nth-child(3) span { 
background-image: url(image3); 
animation-delay: 12s; 
} 
.cb-slideshow li:nth-child(2) div { 
animation-delay: 6s; 
} 
.cb-slideshow li:nth-child(3) div { 
animation-delay: 12s; 
} 
@keyframes imageAnimation { 
0% { opacity: 0; animation-timing-function: ease-in; } 
5% { opacity: 1; animation-timing-function: ease-out; } 
30% { opacity: 1 } 
35% { opacity: 0 } 
100% { opacity: 0 } 
} 
@keyframes titleAnimation { 
0% { opacity: 0 } 
5% { opacity: 1 } 
30% { opacity: 1 } 
33% { opacity: 0 } 
100% { opacity: 0 } 
} 
@media screen and (max-width: 1140px) { 
.cb-slideshow li div h3 { font-size: 20px } 
} 
@media screen and (max-width: 600px) { 
.cb-slideshow li div h3 { font-size: 14px } 
}

仅供参考我不接受信用为大多数代码;它来自：http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

我意识到背景图像和href的不是真正的链接。我删除了它们，所以它可以让我以低声誉发布这个问题。 这里是有问题的页面，如果有帮助：http://kalemhornphoto.format.com/ 这个特殊的网站运行格式，它负责我的网站主题（和代码）托管和后端，虽然我的CSS和HTML覆盖他们。 在此先感谢！

回答：

jQuery是一种方式：

// Go trough every li with #gallerylink inside 
$("li #gallerylink").each(function() 
{ 
    // Bind click event to it 
    $(this).parent().on("click", function() 
    { 
     // Click the link if the li is clicked 
     $(this).find("#gallerylink")[0].click(); 
    }); 
});

以上是 制作背景幻灯片图片单独可点击 的全部内容， 来源链接： utcz.com/qa/258698.html

回到顶部