<分区>
我正在尝试制作带有缩略图导航的轮播。类似于 this Carousel 由于我不知道会有多少缩略图，它应该是一个类似 slider 的东西，带有上一个和下一个按钮。 我尝试使用无序列表，但只显示了第一个 li。这段代码有什么问题？
这是我的代码:
.carousel {
position: relative;
margin: 0 auto;
top: 0px;
left: 0px;
width: 600px;
height: 300px;
overflow: hidden;
}
.carousel img.main
.previous {
position: absolute;
left: 0px;
height: 100%;
width: 30px;
opacity: 0;
background-color: lightblue;
}
.previous:hover {
opacity: 0.5;
}
.next {
position: absolute;
right: 0px;
height: 100%;
width: 30px;
opacity: 0;
background-color: lightblue;
}
.next:hover {
opacity: 0.5;
}
.thumbnavigator {
position: absolute;
left: 0px;
bottom: 0px;
height: 60px;
width: 100%;
opacity: 0;
background-color: purple;
}
.thumbnavigator:hover {
opacity: 0.5;
}
.thumbnavigator img {
height: 60px;
width: auto;
}
ul li {
list-style-type: none;
display: inline;
}<div class="carousel">
<img class="main" src="http://www.car-magazine.it/wp-content/uploads/2014/12/Ferrari-Sergio3_4antSX.jpg" />
<div class="previous">
</div>
<div class="next">
</div>
<div class="thumbnavigator">
<!-- Thumbnails list slider -->
<ul>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
</ul>
</div>
</div>最佳答案
问题在于以下 CSS 规则:
.carousel img {
position: absolute;
width: 100%;
height: auto;
}
这会同时影响主图像和每个缩略图，导致所有缩略图相互堆叠，因为 position:absolute。
只需将选择器从 .carousel img 更改为 .carousel img.main 即可解决此问题。
除此之外，您的 HTML 标记没有正确关闭。以下是更正后的 HTML。
<div class="carousel">
<img class="main" src="http://www.car-magazine.it/wp-content/uploads/2014/12/Ferrari-Sergio3_4antSX.jpg" />
<div class="previous"></div>
<div class="next"></div>
<div class="thumbnavigator">
<ul>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
</ul>
</div>
</div>
关于javascript - (CSS-Javascript-Jquery) 如何为轮播制作缩略图 slider ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37779874/