Question

我正在为我的摄影作品集制作背景图片幻灯片。当每个图像淡入时，我希望它链接到其各自的图库。我还有一个文本框，与图像淡化。我还想链接到相应的画廊。我没有添加代码，因为我不知道如何不破坏链接到的所有代码。目前，无论我在哪里放置链接，它们都会重叠，而底部（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覆盖了他们的。提前谢谢！

Answer 1

jQuery是一种方式：

conn.Open();
cmd.Connection = conn;

cmd.CommandText = "INSERT INTO myTable VALUES(NULL, @number, @text)";
cmd.Prepare();

cmd.Parameters.AddWithValue("@number", 1);
cmd.Parameters.AddWithValue("@text", "One");

for (int i=1; i <= 1000; i++)
{
    cmd.Parameters["@number"].Value = i;
    cmd.Parameters["@text"].Value = "A string value";

    cmd.ExecuteNonQuery();
}

使背景幻灯片图像可单独点击

1 个答案: