<!DOCTYPE html>
<html>
<head>
<title>Try v1.2 Bootstrap Online</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
<!-- Controls buttons -->
<div style = "text-align:center;">
<input type = "button" class = "btn prev-slide" value = "Previous Slide">
<input type = "button" class = "btn next-slide" value = "Next Slide">
<input type = "button" class = "btn slide-one" value = "Slide 1">
<input type = "button" class = "btn slide-two" value = "Slide 2">
<input type = "button" class = "btn slide-three" value = "Slide 3">
</div>
</div>
<script>
$(function() {
// Cycles to the previous item
$(".prev-slide").click(function() {
$("#myCarousel").carousel('prev');
});
// Cycles to the next item
$(".next-slide").click(function() {
$("#myCarousel").carousel('next');
});
// Cycles the carousel to a particular frame
$(".slide-one").click(function() {
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function() {
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function() {
$("#myCarousel").carousel(2);
});
});
</script>
</body>
</html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/264799.html