如何用Bootstrap制作轮播图
2个回答
展开全部
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库！
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
