bootstrap轮播图模板-如何用Bootstrap制作轮播图
工具/材料
SublimeText
01
首先我们需要新建一个HTML5的文档,然后在文档中导入Bootstrap的样式文件,这个文件中包含了轮播图所有的样式定义,如下图所示
02
接下来我们需要导入脚本文件,注意先导入Jquery文件,然后导入bootstrap的脚本文件,顺序一定不能颠倒,如下图所示
03
然后在body标签里定义轮播图的容器,容器的大小需要和图片的大小一样,否则会出现轮播图错位,效果如下图所示
04
接下来我们就正式的添加轮播图了,这里先添加三张图,如下图所示,注意让哪种轮播图显示直接调用Bootstrap的active样式即可
05
轮播图片添加完毕以后,就可以添加轮播图焦点了。在Bootstrap中运用li列表定义轮播图焦点,注意焦点的数量和图片的数量要一样,如下图所示
06
轮播图中还有一个必不可少的元素就是左右箭头,通过Bootstrap的carousel-control样式添加轮播图箭头,如下图所示
07
最后我们运行程序以后,在页面中你就可以看到如下图所示的轮播图效果了。可以看到我们上面说的轮播图焦点和左右箭头都在页面上显示出来了,如下图所示
如何用Bootstrap制作轮播图Bootstrap是Twitter推出的一个用于前端开发的开源工具包,并没有制作任何前端页面的功能。
如果要实现轮播可以通过一下代码实现:
<style_ype="text/css">
*__adding:0;_argin:0;_ist-style-type:_one;_
body__ackground-color:#222222_
a,_mg__order:0;_
body__ont:12px/180%_rial,_elvetica,_ans-serif,"新宋体";_
/*_emo*/
/*五张图片在缩略图时所显示的位置调整*/
#demo_i:nth-of-type(1)_mg__ransform:_ranslate(-210px);_
#demo_i:nth-of-type(2)_mg__ransform:_ranslate(-180px);_
#demo_i:nth-of-type(3)_mg__ransform:_ranslate(-380px);_
#demo_i:nth-of-type(4)_mg__ransform:_ranslate(-450px);_
#demo_i:nth-of-type(5)_mg__ransform:_ranslate(-320px);_
#demo__idth:1160px;_eight:512px;_argin:60px_uto0_uto;_
#demo_mg__idth:820px;_eight:512px;_ax-width:820px;_
#demo_i__loat:_eft;_osition:_elative;_idth:82px;_eight:100%;_verflow:_idden;_ursor:_ointer;_ransition:0.5s;_ransform-origin:_ottom;_ilter:_lpha(opacity=50);_pacity:0.5;_
#demo_i_mg__ransition:1.2s;_
#demo_i___isplay:_lock;_
#demo_i_iv__osition:_bsolute;_ottom:0;_eft:0;_idth:100%;_ackground:#000;_ine-height:32px;_ilter:_lpha(opacity=70);_pacity:0.7;_ext-indent:2em;_
#demo_i_iv___olor:#FFF;_ext-decoration:_one;_
#demo_i_iv_:hover__olor:#F00;_ext-decoration:_one;_
#demo_{_ursor:_ointer;_ransform:_cale(1.02,1.08);_-index:3;_idth:820px;_ilter:_lpha(opacity=100);_pacity:1;_
#demo_img__ransform:_ranslate(0px);_
#demo_i:nth-of-type(1)__ransform-origin:_ottom_eft;_
#demo_i:nth-of-type(5)__ransform-origin:_ottom_ight;_
</style>
<script_rc="js/jquery-1.8.2."></script>
<script_ype="text/javascript"_rc="js/"></script>
<script_anguage="javascript">
$(document).ready(function(e){
_var_pt={
"speed":"fast",//变换速度,三速度可选_low,normal,fast;
"by":"mouseover",//触发事件,click或者mouseover;
"auto":true,//是否自动播放;
"sec":3000//自动播放间隔;
_};
___$("#demo").IMGDEMO(opt);__
});
</script>
</head>
<body>
<ul_d="demo">
_<li_lass="active"><a_ref="#"><img_rc="images/1.png"_/></a>
__<div><a_ref="#">Picture_nformation1</a></div>
_</li>
_<li><a_ref="#"><img_rc="images/2.png"_/></a>
__<div><a_ref="#">Picture_nformation2</a></div>
_</li>
_<li><a_ref="#"><img_rc="images/3.png"_/></a>
__<div><a_ref="#">Picture_nformation3</a></div>
_</li>
_<li><a_ref="#"><img_rc="images/4.png"_/></a>
__<div><a_ref="#">Picture_nformation4</a></div>
_</li>
_<li><a_ref="#"><img_rc="images/5.png"_/></a>
__<div><a_ref="#">Picture_nformation5</a></div>
_</li>
</ul>
</div>
</body>
</html>
本案例使用的是jQuery,需要与jquery-1.8.2.min的jQuery库!
如何用Bootstrap制作轮播图你就把Bootstrap网站上的代码复制到你的页面上,引入""
再在底部</body>上面引入下面两行JS文件代码就可以了
<scriptsrc="//"></script>
logo设计
创造品牌价值
¥500元起
APP开发
量身定制，源码交付
¥2000元起
商标注册
一个好品牌从商标开始
¥1480元起
公司注册
注册公司全程代办
¥0元起
查
看
更
多
- 官方电话
-
官方服务
- 官方网站
- 八戒财税
- 知识产权
- 八戒服务商
- 企业需求
- 数字市场
