Bootstrap的轮播图
代码：
@charset "utf-8"; #myCarousel{ margin: 50px 0 0 0; } #navbar-collapse ul{ margin-top: 0; } .carousel-inner img{ /*让图片居中*/ margin: 0 auto; } .carousel-control{ font-size: 100px; }
第一种方式：采用Jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.css" />
<link rel="stylesheet" href="../css/boot.css" />
</head>
<body>
<!--
响应式轮播图
-->
<div id="myCarousel" class="carousel slide">
<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>
<div class="carousel-inner">
<div class="item active"><img src="../imag/1.jpg" alt="第一张"/></div>
<div class="item"><img src="../imag/2.jpg" alt="第二张"/></div>
<div class="item"><img src="../imag/3.jpg" alt="第三张"/></div>
</div>
<!--
左右箭头
-->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>
</body>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
<script>
$(function(){
//轮播图自动播放
$('#myCarousel').carousel({
interval:3000,
});
//设置垂直居中
$('.carousel-control').css('line-height',$('.carousel-inner div img').height()+'px');
//窗口调节时箭头自适应窗口大小
$(window).resize(function(){
var $height = $('.carousel-inner img').eq(0).height() ||
$('.carousel-inner img').eq(1).height() ||
$('.carousel-inner img').eq(2).height();
$('.carousel-control').css('line-height',$height+'px');
//console.log($('.carousel-inner img').height());
})
});
</script>
</html>
第二种方式：采用Bootstrap方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.css" />
<link rel="stylesheet" href="../css/boot.css" />
</head>
<body>
<!--
响应式轮播图
-->
<div id="myCarousel" class="carousel slide">
<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>
<div class="carousel-inner">
<div class="item active"><img src="../imag/1.jpg" alt="第一张"/></div>
<div class="item"><img src="../imag/2.jpg" alt="第二张"/></div>
<div class="item"><img src="../imag/3.jpg" alt="第三张"/></div>
</div>
<!--
左右箭头，加入Bootstrap的图标
-->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
<script>
$(function(){
//轮播图自动播放
$('#myCarousel').carousel({
interval:3000,
});
});
</script>
</html>
效果图：
浙公网安备 33010602011771号