轮播组件，我认一个很重要的一个插件，因为在网上经常能看到，不知道在现在的网页制作中，是否还会使用这个技术。
但是它有一个比较重要的条件，那就是这些图片大小必须要是一样的大小的，不然会出现切换的时候会有白边出现。
还有一个问题是这个插件的左右两边会有黑色的涂层出现，这是我觉得不好的地方，目前还不知道如何把它去除。
<!DOCTYPE html> <html> <head> <title>轮播插件</title> <meta charset = ‘utf-8‘> <link rel = ‘stylesheet‘ href = ‘http://files.cnblogs.com/files/reverse-2016-12-27/bootstrap.min.css‘> <meta name = ‘viewport‘ content = ‘width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no‘> </head> <body> <div class = ‘carousel slide‘ id = ‘myCarousel‘ style = ‘width:294px‘ data-ride = ‘carousel‘ data-interval = ‘500‘> <ol class = ‘carousel-indicators‘> <li data-target = ‘#myCarousel‘ class = ‘active‘ data-slide-to = ‘0‘></li> <li data-target = ‘#myCarousel‘ data-slide-to = ‘1‘></li> <li data-target = ‘#myCarousel‘ data-slie-to = ‘2‘></li> </ol> <div class = ‘carousel-inner‘> <div class = ‘item active‘> <img src = ‘图1.jpg‘ alt = ‘第一‘> <div class = ‘carousel-caption‘> <h3>第一</h3> <p>这是第一张图片</p> </div> </div> <div class = ‘item‘> <img src = ‘图2.jpg‘ alt = ‘第二‘> <div class = ‘carousel-caption‘> <h3>第二</h3> <p>第二张图片</p> </div> </div> <div class = ‘item‘> <a href = ‘http:www.baidu.com‘> <img src = ‘图3.jpg‘ alt = ‘第三‘></a> <div class = ‘carousel-caption‘> <h3>第三</h3> <p>这是第三张</p> </div> </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> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script> /* var val = ‘block‘; function dis(){ val = val == ‘block‘?‘none‘:‘block‘; $(‘#myCarousel‘).css({ ‘display‘:val, }) setTimeout(arguments.callee,500); } dis(); */ </script> </body>
</html>
原文：http://www.cnblogs.com/reverse-2016-12-27/p/6246007.html