基于BootStrap的图片轮播效果展示实例代码
2016-05-23 11:47
836 查看
先给大家展示下bootstrap图片轮播图,效果如下所示,如果大家感觉效果还不错,请继续往下阅读,参考实现代码。
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>图片轮播_01</title> <!-- Bootstrap --> <link href="../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="../js/jquery-2.1.4.min.js"></script> <script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> </head> <body> <!-- 作者:凯尔 时间:2016-02-20 描述: carousel date-interval="4000"停留时间/幅图 支持键盘左右方向键对图片进行轮播方向选择 --> <div class="container"> <div style="width:960px;height: 400px;margin: auto;padding: auto;"> <div id="carousel-example-generic" class="carousel slide"> <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" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="../img/图片轮播/pic01.jpg" /> </div> <div class="item"> <img src="../img/图片轮播/pic02.jpg" /> <!-- 图片上要显示的文字 --> <div class="carousel-caption"> <h3>联想校园大使</h3></div> </div> <div class="item"> <img src="../img/图片轮播/pic03.jpg" /> </div> <div class="item"> <img src="../img/图片轮播/pic04.jpg" /> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> <!--设定时间间隔,通过JavaScript,这样做相对于css属性设定而言,可以自启动,无需人为进行干预--> <script> $(".carousel").carousel({ interval: 4000 }) </script> </body> </html>
以上所述是小编给大家介绍的基于BootStrap的图片轮播效果展示实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- 按右键另存图片只能存BMP
- photoshop去除图片上的水印
- upload上传单张图片
- 图片引发的溢出危机(图)
- C#实现把彩色图片灰度化代码分享
- C#将图片和字节流互相转换并显示到页面上
- C#监控文件夹并自动给图片文件打水印的方法
- 纯CSS实现的当鼠标移上图片添加阴影效果代码
- 如何使用C#从word文档中提取图片
- C#实现打开画图的同时载入图片、最大化显示画图窗体的方法
- C#图片添加水印的实现代码
- 随鼠标移动的图片或文字特效代码
- CSS 图片横向排列实现代码
- C#实现将Email地址转成图片显示的方法
- C#实现图片加相框的方法
- 超级经典一套鼠标控制左右滚动图片带自动翻滚
- 用css实现图片垂直居中的使用技巧