我是 web 开发的新手..并尝试使用 html5、css3 和 JavaScript 创建一个图像 slider ，带有左右导航按钮和播放/暂停切换，点击时会发生变化，无论我是否点击，效果都必须滑动导航或播放/暂停。
我正在尝试的是循环滑动图像...因此图像会无休止地重复。
我试过了，但没能成功...是否有可能实现这一目标以及使用可自定义的箭头和播放/暂停图像？
任何资源和代码都会对大家有很大帮助。我想从头开始。
<!DOCTYPE HTML>
<html>
<head>
<link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css"
type="text/css">
<link rel = "stylesheet" href = "fontaws/font-awesome.min.css
type = "text/css">
<link rel = "stylesheet" href = "style.css" type = "text/css">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3
/jquery.min.js"></script>
<script>
$(function () {
$('#homeCarousel').carousel({
interval:2000,
pause: "false"
});
$('#playButton').click(function () {
if($('#playSpan').hasClass("glyphicon glyphicon-play")){
$('#homeCarousel').carousel('cycle');
$('#playSpan').removeClass('glyphicon glyphicon-play');
$('#playSpan').addClass('glyphicon glyphicon-pause');
}
else{
$('#homeCarousel').carousel('pause');
$('#playSpan').removeClass('glyphicon glyphicon-pause');
$('#playSpan').addClass('glyphicon glyphicon-play');
}
});
});
</script>
</head>
<body>
<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<img src="img2.jpg"/>
</div>
<!-- Item 2 -->
<div class="item">
<img src="img3.jpg"/>
</div>
<!-- Item 3 -->
<div class="item">
<img src="img4.jpg" />
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#homeCarousel" role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#homeCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
<div id="carouselButtons">
<button id="playButton" type="button" class="btn btn-default btn-xs">
<span id="playSpan" class="glyphicon glyphicon-pause"></span>
</button>
</div>
</div>
</body>
</html>
最佳答案
仅供引用: fiddle http://jsfiddle.net/KyleMit/XFcSv/已根据用户要求更新
http://jsfiddle.net/XFcSv/896/
<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<img src="http://lorempixel.com/1500/600/abstract/1" />
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/2" />
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/3" />
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#homeCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#homeCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div id="carouselButtons">
<button id="playButton" type="button" class="btn btn-default btn-xs">
<span id="playSpan" class="glyphicon glyphicon-pause"></span>
</button>
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/20615100/1366033'>Add Play/Pause button to bootstrap carousel</a>
<br/> Find documentation: <a href='http://getbootstrap.com/css/'>Get Bootstrap 3.0</a>
<br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a>
<br/>
<div>
$(function() {
$('#homeCarousel').carousel({
interval: 2000,
pause: "false"
});
$('#playButton').click(function() {
if ($('#playSpan').hasClass("glyphicon glyphicon-play")) {
$('#homeCarousel').carousel('cycle');
$('#playSpan').removeClass('glyphicon glyphicon-play');
$('#playSpan').addClass('glyphicon glyphicon-pause');
} else {
$('#homeCarousel').carousel('pause');
$('#playSpan').removeClass('glyphicon glyphicon-pause');
$('#playSpan').addClass('glyphicon glyphicon-play');
}
});
});
#carouselButtons {
margin-left: 280px;
position: absolute;
bottom: 6px;
}
关于javascript - 如何创建带有导航箭头的图像轮播和点击时更改的播放/暂停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34590402/