图片无缝滚动BootStrap 轻松实现

本文主要是介绍图片无缝滚动BootStrap 轻松实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

图片无缝滚动，不需要繁琐的javascript代码，只需引用BootStrap 中的javascript插件（Carousel)即可轻松实现。来看看吧：
现附上演示地址：

https://haochn.github.io/demo/BootStrap/PicSwitch.html

源代码：

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>BootStrap 实现图片无缝滚动</title>
<style>
.body {display: block;  margin-left: auto;  margin-right: auto; float: none; width:800px;
}
</style>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script></head><body><div class="body"><h1 class="text-center">BootStrap 实现图片无缝滚动</h1><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><!-- 轮播（Carousel）项目内容 --><div class="carousel-inner" role="listbox"><!-- 默认显示图片 --><div class="item active"><img src="img/1.jpg" alt="态生两靥之愁，娇袭一身之病。"><!-- 图片描述内容 --><div class="carousel-caption">态生两靥之愁，娇袭一身之病。</div></div><div class="item"><img src="img/2.jpg" alt="泪光点点，娇喘微微。"><div class="carousel-caption">泪光点点，娇喘微微。</div></div><div class="item"><img src="img/3.jpg" alt="闲静似娇花照水，行动如弱柳扶风。"><div class="carousel-caption">闲静似娇花照水，行动如弱柳扶风。</div></div><div class="item"><img src="img/4.jpg" alt="心较比干多一窍，病如西子胜三分。"><div class="carousel-caption">心较比干多一窍，病如西子胜三分。</div></div></div><!-- 轮播（Carousel）导航(控制左右移动) --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>
</div></div></body>
</html>