在此，盘中的缩略图，出现两次，在顶部和旋转木马幻灯片的底部。我无法弄清楚为什么！ :)
<html>
<head>
<title>Stackoverflow Trials</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<style>
h4 {
margin: 20px 10px 10px;
}
p {
margin: 10px;
}
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-example-generic .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-example-generic .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-example-generic .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-example-generic .carousel-indicators li.active img {
opacity: 1;
}
#carousel-example-generic .carousel-indicators li:hover img {
opacity: 0.75;
}
#carousel-example-generic .carousel-outer {
position: relative;
}
</style>
</head>
<body>
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb1" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb2" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb3" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb4" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">...</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class='carousel-outer'>
<!-- Wrapper for slides -->
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<ol class='carousel-indicators'>
</ol>
</div>
<script>
$(document).ready(function() {
// create arrays of images to be displayed in each carousel for each thumbnails.
// the array name is exactly the same as thumbnail id
var thumb1 = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
var thumb2 = new Array("book3.jpg","book4.jpg","book5.jpg","book2.jpg");
var thumb3 = new Array("book4.jpg","book5.jpg","book2.jpg","book3.jpg");
var thumb4 = new Array("book5.jpg","book4.jpg","book3.jpg","book2.jpg");
var $carousel = $('#carousel-example-generic .carousel-inner');
var $carouselInd = $('#carousel-example-generic .carousel-indicators');
$(".thumbnail").click(function() {
var numberOfSlides = $('.item').length;
if(numberOfSlides >0) {
// remove all items from the carousel before adding the new ones to it.
$carousel.empty();
//$carouselInd.empty();
}
var m = this.id;
m = eval(m);
//alert(m.length);
for(var i=0 ; i< m.length ; i++) {
var j= i+1;
$('<div class="item"><img src="images/'+m[i]+'"><div class="carousel-caption"></div> </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"><img src="http://placehold.it/100x50&text=slide'+j+'" alt="" /></li>').appendTo('.carousel-indicators');
}
$('.item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel-example-generic').carousel();
});
});
</script>
</body>
旋转木马博
感谢您的答复:)任何想法如何能在模态显示？ – Wojtkovy