如何用Bootstrap制作轮播图

 我来答

2个回答

#热议# 在购买新能源车时，要注意哪些？

名岐居士
2017-06-11 · 一个懂互联网的小道士

名岐居士

采纳数：331 获赞数：834

向TA提问私信TA

关注

展开全部

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>