Posted in Javascript onDecember 30, 2016
今天学习bootstrap,发现轮播图的实现很强大,于是记录下来,方便自己以后使用。
1:相关知识总结
carousel slide:整个轮播图的最外边一层的样式 data-ride:用于标记轮播在页面加载时就开始动画播放 data-interval:自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环 data-wrap:轮播是否连续循环 carousel-indicators:轮播图的小圆点 data-target: data-slide-to:向轮播传递一个原始滑动索引 carousel-inner:图片容器层的样式 data-slide: 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置
2:demo
<body> <div class="container"> <div class="row"> <div class="carousel slide" id="slide" data-ride="carousel" data-interval="2000" data-wrap="true"> <!--轮播图的小圆点--> <ol class="carousel-indicators"> <li data-target="#slide" data-slide-to="0" class="active"></li> <li data-target="#slide" data-slide-to="1"></li> </ol> <!--整个轮播图的div--> <div class="carousel-inner"> <div class="item active"> <img src="./image/p1.jpg" alt=""> <div class="carousel-caption"> <h3>商城</h3> <p>第一张图片</p> </div> </div> <div class="item"> <img src="./image/p2.jpg" alt=""> <div class="carousel-caption"> <h3>商城</h3> <p>第二张图片</p> </div> </div> </div> <a class="carousel-control left" data-target="#slide" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">‹</span> </a> <a class="carousel-control right" data-target="#slide" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">›</span> </a> </div> </div> </div> </body>
以上所述是小编给大家介绍的BootStrap实现轮播图效果(收藏),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
BootStrap实现轮播图效果(收藏)
- Author -
cullinans声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@