我制作了这个图像滑块。它工作正常，但我希望有人可以告诉我如何添加一个下一个按钮呢？这就是我所需要的，只需点击下一个按钮即可浏览所有图像。它会在哪里进入css，拜托？非常感谢。
CSS：
#images {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#images img {
width: 500px;
height: 300px;
position: absolute;
top: 0;
left: -500px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
cursor:pointer;
}
#images img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#images img:first-child {
left: 0;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 2px solid #6892F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #6892F2;
}
以及HTML：
<div id="images">
<img id="image1" src="Slide1.png" />
<img id="image2" src="Slide2.png" />
<img id="image3" src="Slide3.png" />
<img id="image4" src="Slide4.png" />
<img id="image5" src="Slide5.png" />
<img id="image6" src="Slide6.png" />
<img id="image7" src="Slide7.png" />
<img id="image8" src="Slide8.png" />
<img id="image9" src="Slide9.png" />
<img id="image10" src="Slide10.png" />
<img id="image11" src="Slide11.png" />
<img id="image12" src="Slide12.png" />
<img id="image13" src="Slide13.png" />
</div>
<div id="slider"><b>
<a href="#image1">Start at 13</a>
<a href="#image2">12</a>
<a href="#image3">11</a>
<a href="#image4">10</a>
<a href="#image5">9</a>
<a href="#image6">8</a>
<a href="#image7">7</a>
<a href="#image8">6</a>
<a href="#image9">5</a>
<a href="#image10">4</a>
<a href="#image11">3</a>
<a href="#image12">2</a>
<a href="#image13">1</a>
</div></b>
答案 0 :(得分：0)
尝试将图片移动到包含每张幻灯片的唯一导航元素的div：
<div id="image1">
<img src="Slide1.png" />
<a href="#image13">Prev</a>
<a href="#image2">Next</a>
</div>
<div id="image2">
<img src="Slide2.png" />
<a href="#image1">Prev</a>
<a href="#image3">Next</a>
</div>
答案 1 :(得分：0)
你可以尝试
您的HTML基础可用于将所有图像包装在一个额外的div中。
这个额外的div将允许移动图像行。的 DEMO
HTML base：
<div id="images">
<div>
<img tabindex="0" src="http://lorempixel.com/100/200/nature/1" />
<!-- + 9 others -->
</div>
</div>
CSS想法：
#images { /* style and size it so it has size of one image and room to show aside : < and > (or some fancy icons) */}
#images:before , #images:after {/* content: '<' or '>' or fancy icon , absolute position */}
div {float:right;will aloow to overflow on left-side !, margin-right: - total width taken by images */
img {/* give some padding to resize width of parent box, set z-index and overlap them on right side */}
img:focus {/* lower z-index so next overlapping can be clikcked*/}
img:focus ~img:last-of-type {give some positive margin-right so next image takes place and is seen*/}
为此示例提供了此 CSS ：
#images{
width:150px;
height:200px;
overflow:hidden;
font-size:0;
border:solid 3px black;
white-space:nowrap;
position:relative;
margin:auto;
}
#images:before, #images:after {
content:'<';/* or some fancy font/image */
font-size:30px;
font-weight:bold;
text-shadow: 3px 0 , 0 0 1px;
height:200px;
line-height:200px;
position:absolute;
top:0;
left:3px;
z-index:3;/* on top of images */
pointer-events:none;/* not clickable */
}
#images:after {
content:'>';
left:auto;
right:3px;
text-shadow: -3px 0 , 0 0 1px;
}
img {
margin:0 -25px 0 0;
padding:0 25px;
position:relative;
z-index:2;/* defaut */
}
img:focus {
z-index:1;/* next one overlapping is on top */
}
img:hover {
background:gray;
}
img:nth-child(odd) {
}
#images div {
float:right;/* so it can overflow on left */
whidth:100%; /* or 150px*/
margin-right:-733.5%;/* or 1250px = 10 imgs 100px + 50px padding -25px negative margin */
}
img:nth-child(2):focus ~img:last-of-type {
margin-right:100px;
}
img:nth-child(3):focus ~img:last-of-type {
margin-right:225px;
}
/* and so on use a preprocessor to generate this part */
img:nth-child(9):focus ~img:last-of-type {
margin-right:975px;
}
img:nth-child(10):focus {/* LAST ONE */
margin-right:1100px;
border-right:25px solid black;/* hide next button , it could be a higher z-index as well with a background */
padding-right:0;
pointer-events:none;/* no click to loose focus to reset slide */
}
transitions ?一个小小的马车，动画在这里很方便：）