图片无缝滚动，不需要繁琐的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="/html5shiv/3.7.2/html5shiv.min.js"></script><script src="/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>
是不是很简单没呢？？？，自己动手试试吧！！！
