我想在点击图标时更改幻灯片上的照片。 我应该使用target：对于这个或我将使用什么Html / Css元素？
这是我的Html：
<!DOCTYPE.html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/65-32.png">Home</li>
<li>Login</li>
<li>Profile</li>
<li>Service</li>
<li>Photos</li>
</ul>
</div><!---------------------------header------------------->
<!---------------slideshow--------------------->
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img src="http://freelargephotos.com/002475_l.jpg" />
<p class="text">/p><p class="subtext"></p>
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="http://freelargephotos.com/002475_l.jpg" />
<p class="text">Yankees Won</p><p class="subtext">The Detroit Tigers travel to the Coliseum to face the Oakland Athletics in Game 5 of the ALDS. These two teams will once again matchup to conclude the most exciting series in the 2013 postseason, thus far. Check out the live stream available online at 8 p.m. ET
The Tigers have scored 14 runs in this series. The A's have scored 15 runs. This would explain why this series has been so tight. All games have been settled by three runs or less, two of which, were decided by one run.read more>>>>></p>
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slide">
<img src="http://freelargephotos.com/002475_l.jpg" />
<p class="text">Yankees Won</p><p class="subtext">The Detroit Tigers travel to the Coliseum to face the Oakland Athletics in Game 5 of the ALDS. These two teams will once again matchup to conclude the most exciting series in the 2013 postseason, thus far. Check out the live stream available online at 8 p.m. ET
The Tigers have scored 14 runs in this series. The A's have scored 15 runs. This would explain why this series has been so tight. All games have been settled by three runs or less, two of which, were decided by one run.read more>>>>></p>
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slide">
<img src="http://freelargephotos.com/002475_l.jpg" />
<p class="text">Yankees Won</p><p class="subtext">The Detroit Tigers travel to the Coliseum to face the Oakland Athletics in Game 5 of the ALDS. These two teams will once again matchup to conclude the most exciting series in the 2013 postseason, thus far. Check out the live stream available online at 8 p.m. ET
The Tigers have scored 14 runs in this series. The A's have scored 15 runs. This would explain why this series has been so tight. All games have been settled by three runs or less, two of which, were decided by one run.read more>>>>></p>
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slide">
<img src="http://cdn3.sbnation.com/uploads/chorus_image/image/21024945/20131010_jla_sj7_324.0_standard_709.0.jpg" />
<p class="text">Yankees Won</p><p class="subtext">The Detroit Tigers travel to the Coliseum to face the Oakland Athletics in Game 5 of the ALDS. These two teams will once again matchup to conclude the most exciting series in the 2013 postseason, thus far. Check out the live stream available online at 8 p.m. ET
The Tigers have scored 14 runs in this series. The A's have scored 15 runs. This would explain why this series has been so tight. All games have been settled by three runs or less, two of which, were decided by one run.read more>>>>></p>
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slide">
<img src="http://cdn3.sbnation.com/uploads/chorus_image/image/21024945/20131010_jla_sj7_324.0_standard_709.0.jpg" />
<p class="text">Yankees Won</p><p class="subtext">The Detroit Tigers travel to the Coliseum to face the Oakland Athletics in Game 5 of the ALDS. These two teams will once again matchup to conclude the most exciting series in the 2013 postseason, thus far. Check out the live stream available online at 8 p.m. ET
The Tigers have scored 14 runs in this series. The A's have scored 15 runs. This would explain why this series has been so tight. All games have been settled by three runs or less, two of which, were decided by one run.read more>>>>></p>
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
<label for="img-3" class="nav-dot" id="img-dot-3"></label>
<label for="img-4" class="nav-dot" id="img-dot-4"></label>
<label for="img-5" class="nav-dot" id="img-dot-5"></label>
<label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>
</ul>
<!------------------------------------>
<div id="nav-post">
<h1>Project</h1>
<p>
To my home girls here with the big butt
Shaking it like we at a strip club
Remember only God can judge ya
Forget the haters cause somebody loves ya
And everyone in line in the bathroom
Trying to get a line in the bathroom
We all so turned up here
Getting turned up, yeah, yeah
</p>
</div>
<hr>
<div id="services">
<ul>
<li><a href=""><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/19-64.png"><h1>Application Integration</h1></a>
<p>To my home girls here with the big butt
Shaking it like we at a strip club
Remember only God can judge ya
Forget the haters cause somebody loves ya
And everyone in line in the bathroom
Trying to get a line in the bathroom
We all so turned up here
Getting turned up, yeah, yeah</p>
</li>
<a href=""><li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/21-64.png"><h1>Flexibility</h1></a>
<p>To my home girls here with the big butt
Shaking it like we at a strip club
Remember only God can judge ya
Forget the haters cause somebody loves ya
And everyone in line in the bathroom
Trying to get a line in the bathroom
We all so turned up here
Getting turned up, yeah, yeah</p>
</li>
<li><img src=https://cdn2.iconfinder.com/data/icons/pittogrammi/142/94-64.png><h1>Cost Savings</h1>
<p>To my home girls here with the big butt
Shaking it like we at a strip club
Remember only God can judge ya
Forget the haters cause somebody loves ya
And everyone in line in the bathroom
Trying to get a line in the bathroom
We all so turned up here
Getting turned up, yeah, yeah</p>
</li>
</ul>
</div>
</div>
</body>
</html>
这是我的Css：
html{
background:background: background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #000000 0%, #000000 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(0%,#000000), color-stop(0%,#000000), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
font-family: 'Oswald', sans-serif;
}
#wrapper{
width:1024px;
margin-right:auto;
margin-left:auto;
min-height:1000px;
background:#888888;
}
#header{
color:#000000;
}
#header li{
display:inline;
padding:10px;
background:#FFF;
border-radius:12px;
}
/*slideshow*/
/*slider*/
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
.slides {
width:1024px;
padding-right:65px;
height:420px;
display: block;
position: relative;
z-index:11;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slides input { display: none; }
.slide-container { display: block; }
.text{
background:black;
text-align:center;
opacity:0.8;
font-size:50px;
width:30%;
color:white;
text-align:center;
position:relative;
position:absolute;
right:100px;
margin-top:-400px;
}
.subtext
{
color:white;
font-family:arial;
font-size:15px;
text-align:center;
position:relative;
position:absolute;
right:110px;
width:350px;
margin-top:-260px;
}
.slide
{
top: 0;
left:-11px;
opacity: 0;
margin-left:auto;
margin-right:auto;
width:100%;
height:100%;
text-align:center;
display: block;
position: absolute;
transform: scale(0);
-moz-transform: scale(0);
-webkit-transform: scale(0);
transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
}
.slide img {
margin-right:auto;
width:960px;
margin-left:-83px;
margin-top:-10px;
height:110%;
text-align:center;
}
.nav label {
width: 200px;
height: 100%;
display:none;
position: absolute;
margin-left:-35px;
margin-right:110px;
padding:auto;
height:110%;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
-moz-transition: opacity .2s;
-webkit-transition: opacity .2s;
color: #FFF;
font-size: 156pt;
text-align: center;
line-height: 380px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slide:hover + .nav label { opacity: 0.5; }
.nav label:hover { opacity: 1; }
.nav .next { right: 0; }
input:checked + .slide-container .slide {
opacity: 1;
transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label { display: block; }
.nav-dots {
width: 960px;
bottom: 0px;
height: 1px;
display: block;
position: absolute;
text-align:center;
}
.nav-dots .nav-dot {
top: -5px;
width: 11px;
height: 11px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
}
.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
background: rgba(0, 0, 0, 0.8);
}
#nav-post{
padding-top:30px;
color:#FFF;
padding:20px;
}
#nav-post h1{
text-align:center;
}
#services{
padding-top:100px;
}
#services li{
display:inline-block;
padding:30px;
}
#services img{
background:#FFF;
border-radius:32px;
padding:30px;
}
#services p{
width:200PX;
text-align:left;
color:#FFF;
}
答案 0 :(得分：0)
我不知道我是否完全按照你的意愿行事，但让我试试...... 如果他们点击X图标，您希望人们在幻灯片上获得特定图像吗？
那么，你应该用label元素包装你的图标，就像你的上一个/下一个图标一样。
<!DOCTYPE.html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/65-32.png">Home</li>
<li>Login</li>
<li>Profile</li>
<li>Service</li>
<li>Photos</li>
</ul>
</div>
<!---------------------------header------------------->
<!---------------slideshow--------------------->
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img src="http://freelargephotos.com/002475_l.jpg" />
<p class="text">Application Integration</p>
<p class="subtext">To my home girls here with the big butt Shaking it like we at a strip club Remember only God can judge ya Forget the haters cause somebody loves ya And everyone in line in the bathroom Trying to get a line in the bathroom We all so turned up here Getting turned up, yeah, yeah</p>
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="http://freelargephotos.com/002475_l.jpg" />
<p class="text">Flexibility</p>
<p class="subtext">To my home girls here with the big butt Shaking it like we at a strip club Remember only God can judge ya Forget the haters cause somebody loves ya And everyone in line in the bathroom Trying to get a line in the bathroom We all so turned up here Getting turned up, yeah, yeah</p>
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slide">
<img src="http://freelargephotos.com/002475_l.jpg" />
<p class="text">Cost Savings</p>
<p class="subtext">To my home girls here with the big butt Shaking it like we at a strip club Remember only God can judge ya Forget the haters cause somebody loves ya And everyone in line in the bathroom Trying to get a line in the bathroom We all so turned up here Getting turned up, yeah, yeah</p>
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slide">
<img src="http://freelargephotos.com/002475_l.jpg" />
<p class="text">Yankees Won</p>
<p class="subtext">The Detroit Tigers travel to the Coliseum to face the Oakland Athletics in Game 5 of the ALDS. These two teams will once again matchup to conclude the most exciting series in the 2013 postseason, thus far. Check out the live stream available online at 8 p.m. ET The Tigers have scored 14 runs in this series. The A's have scored 15 runs. This would explain why this series has been so tight. All games have been settled by three runs or less, two of which, were decided by one run.read more>>>>></p>
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slide">
<img src="http://cdn3.sbnation.com/uploads/chorus_image/image/21024945/20131010_jla_sj7_324.0_standard_709.0.jpg" />
<p class="text">Yankees Won</p>
<p class="subtext">The Detroit Tigers travel to the Coliseum to face the Oakland Athletics in Game 5 of the ALDS. These two teams will once again matchup to conclude the most exciting series in the 2013 postseason, thus far. Check out the live stream available online at 8 p.m. ET The Tigers have scored 14 runs in this series. The A's have scored 15 runs. This would explain why this series has been so tight. All games have been settled by three runs or less, two of which, were decided by one run.read more>>>>></p>
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slide">
<img src="http://cdn3.sbnation.com/uploads/chorus_image/image/21024945/20131010_jla_sj7_324.0_standard_709.0.jpg" />
<p class="text">Yankees Won</p>
<p class="subtext">The Detroit Tigers travel to the Coliseum to face the Oakland Athletics in Game 5 of the ALDS. These two teams will once again matchup to conclude the most exciting series in the 2013 postseason, thus far. Check out the live stream available online at 8 p.m. ET The Tigers have scored 14 runs in this series. The A's have scored 15 runs. This would explain why this series has been so tight. All games have been settled by three runs or less, two of which, were decided by one run.read more>>>>></p>
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
<label for="img-3" class="nav-dot" id="img-dot-3"></label>
<label for="img-4" class="nav-dot" id="img-dot-4"></label>
<label for="img-5" class="nav-dot" id="img-dot-5"></label>
<label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>
</ul>
<!------------------------------------>
<div id="nav-post">
<h1>Project</h1>
<p>To my home girls here with the big butt Shaking it like we at a strip club Remember only God can judge ya Forget the haters cause somebody loves ya And everyone in line in the bathroom Trying to get a line in the bathroom We all so turned up here Getting turned up, yeah, yeah</p>
</div>
<hr>
<div id="services">
<ul>
<li>
<label for="img-1" style="cursor:pointer;">
<img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/19-64.png">
<h1>Application Integration</h1>
<p>To my home girls here with the big butt Shaking it like we at a strip club Remember only God can judge ya Forget the haters cause somebody loves ya And everyone in line in the bathroom Trying to get a line in the bathroom We all so turned up here Getting turned up, yeah, yeah</p>
</label>
</li>
<li>
<label for="img-2" style="cursor:pointer;">
<img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/21-64.png">
<h1>Flexibility</h1>
<p>To my home girls here with the big butt Shaking it like we at a strip club Remember only God can judge ya Forget the haters cause somebody loves ya And everyone in line in the bathroom Trying to get a line in the bathroom We all so turned up here Getting turned up, yeah, yeah</p>
</label>
</li>
<li>
<label for="img-3" style="cursor:pointer;">
<img src=https://cdn2.iconfinder.com/data/icons/pittogrammi/142/94-64.png>
<h1>Cost Savings</h1>
<p>To my home girls here with the big butt Shaking it like we at a strip club Remember only God can judge ya Forget the haters cause somebody loves ya And everyone in line in the bathroom Trying to get a line in the bathroom We all so turned up here Getting turned up, yeah, yeah</p>
</label>
</li>
</ul>
</div>
</div>
您还可以添加一个css类，使这些元素像cursor:pointer;
并且，检查您的HTML，看一下<p class="text">/p><p class="subtext"></p>的第一张幻灯片</p>修补程序：）