如何用Bootstrap制作轮播图

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用Bootstrap制作轮播图相关的知识，希望对你有一定的参考价值。

Bootstrap是Twitter推出的一个用于前端开发的开源工具包，并没有制作任何前端页面的功能。

如果要实现轮播可以通过一下代码实现：

<style type="text/css">
*  padding: 0; margin: 0; list-style-type: none; 
body  background-color: #222222 
a, img  border: 0; 
body  font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; 
/* demo */
/*五张图片在缩略图时所显示的位置调整*/
#demo li:nth-of-type(1) img  transform: translate(-210px); 
#demo li:nth-of-type(2) img  transform: translate(-180px); 
#demo li:nth-of-type(3) img  transform: translate(-380px); 
#demo li:nth-of-type(4) img  transform: translate(-450px); 
#demo li:nth-of-type(5) img  transform: translate(-320px); 
#demo  width: 1160px; height: 512px; margin: 60px auto 0 auto; 
#demo img  width: 820px; height: 512px; max-width: 820px; 
#demo li  float: left; position: relative; width: 82px; height: 100%; overflow: hidden; cursor: pointer; transition: 0.5s; transform-origin: bottom; filter: alpha(opacity=50); opacity: 0.5; 
#demo li img  transition: 1.2s; 
#demo li a  display: block; 
#demo li div  position: absolute; bottom: 0; left: 0; width: 100%; background: #000; line-height: 32px; filter: alpha(opacity=70); opacity: 0.7; text-indent: 2em; 
#demo li div a  color: #FFF; text-decoration: none; 
#demo li div a:hover  color: #F00; text-decoration: none; 
#demo li.active  cursor: pointer; transform: scale(1.02, 1.08); z-index: 3; width: 820px; filter: alpha(opacity=100); opacity: 1; 
#demo li.active img  transform: translate(0px); 
#demo li:nth-of-type(1)  transform-origin: bottom left; 
#demo li:nth-of-type(5)  transform-origin: bottom right; 
</style>

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.indexSlidePattern.js"></script>
<script language="javascript">
$(document).ready(function(e)
  var opt =
"speed" : "fast" , //变换速度,三速度可选 slow,normal,fast;
"by" : "mouseover" , //触发事件,click或者mouseover;
"auto" : true , //是否自动播放;
"sec" : 3000   //自动播放间隔;
  ;
      $("#demo").IMGDEMO(opt);    
);
</script>

</head>
<body>

<ul id="demo">
  <li class="active"> <a href="#"><img src="images/1.png"  /></a>
    <div><a href="#">Picture information1</a></div>
  </li>
  <li> <a href="#"><img src="images/2.png"  /></a>
    <div><a href="#">Picture information2</a></div>
  </li>
  <li> <a href="#"><img src="images/3.png"  /></a>
    <div><a href="#">Picture information3</a></div>
  </li>
  <li> <a href="#"><img src="images/4.png"  /></a>
    <div><a href="#">Picture information4</a></div>
  </li>
  <li> <a href="#"><img src="images/5.png"  /></a>
    <div><a href="#">Picture information5</a></div>
  </li>
</ul>
</div>
</body>
</html>

本案例使用的是jQuery，需要jquery.indexSlidePattern与jquery-1.8.2.min的jQuery库！

 参考技术A 如何用Bootstrap制作轮播图_百度经验

bootstrap轮播图carousel插件

一、基本介绍见：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

 

二、例子：在PC端使用轮播图（高度固定，图片居中，容器铺满，使用背景图）

技术图片
<div id="carousel-example-generic" class="carousel slide" data-ride="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>
        </ol>
        <!-- 轮播图片及说明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="#" class="pc_imgBox" style="background-image: url(‘images/2-1.png‘)"></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(‘images/2-2.png‘)"></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(‘images/2-3.png‘)"></a>
          </div>
        </div>
        <!-- 控制按钮：左右切换 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
技术图片
技术图片
        .pc_imgBox{
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position:  center;
            background-repeat: no-repeat;
        }
        .carousel-indicators{
            background: #ccc;
        }
技术图片

技术图片

三、例子：在移动端使用轮播图（宽度自适应，高度自动变化，使用img引入图片）

技术图片
<div id="carousel-example-generic" class="carousel slide" data-ride="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>
        </ol>
        <!-- 轮播图片及说明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="#" class="pc_imgBox"><img src="images/1-1.png" ></a>
          </div>
          <div class="item">
            <a href="#" class="m_imgBox"><img src="images/1-2.png" ></a>
          </div>
          <div class="item">
            <a href="#" class="m_imgBox"><img src="images/1-3.png" ></a>
          </div>
        </div>
        <!-- 控制按钮：左右切换 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
技术图片
技术图片
        .m_imgBox{
            display: block;
            width: 100%;
        }
        .carousel-indicators{
            background: #ccc;
        }
技术图片

技术图片

四、例子：响应式的轮播图（利用媒体查询自适应PC端和移动端，注意应用在pc和移动端的图片是不一样的！）

技术图片
<div id="carousel-example-generic" class="carousel slide" data-ride="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>
        </ol>
        <!-- 轮播图片及说明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(‘images/2-1.png‘)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-1.png" ></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(‘images/2-2.png‘)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-2.png" ></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(‘images/2-3.png‘)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-3.png" ></a>
          </div>
        </div>
        <!-- 控制按钮：左右切换 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
技术图片
技术图片
        .pc_imgBox{
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position:  center;
            background-repeat: no-repeat;
        }
        .m_imgBox{
            display: block;
            width: 100%;
        }
        .carousel-indicators{
            background: #ccc;
        }
技术图片
 

技术图片

ps:实现轮播图时间间隔改变的两种方式
在data-ride后面加上一个属性data-interval=“millisecond”，其中，millisecond为需要设置的毫秒数，如下：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
使用JavaScript语句实现：
官网给出的代码是：
$(‘.carousel‘).carousel({
interval: 2000
});

 

以上是关于如何用Bootstrap制作轮播图的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap轮播图的切换按钮如何制作？

四十六使用bootstrap制作轮播图(carousel)

如何用swiper快速实现一个轮播图

如何用transform写平移轮播图

如何用面向对象的思维去封装一个小型轮播图插件

轮播图