基于Bootstrap实现图片轮播效果


本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。



相关阅读:
使用jQuery实现图片遮罩半透明坠落遮挡
Windows10 USB无线网卡如何使用 usb无线网卡怎么使用
浅谈Ajax请求与浏览器缓存
开启PHP的伪静态模式
jQuery 中ajax异步调用的四种方式
Win10到底啥什么时候正式发布?微软Build 2015未公布确切上市时间
基于html5和nodejs相结合实现websocket即使通讯
win10安装密钥更新变化有哪些? win10安装密钥新变化的内容
html禁止清除input文本输入缓存的两种方法
JavaScript实现梯形乘法表的方法
jquery学习总结(超级详细)
jQuery.Highcharts.js绘制柱状图饼状图曲线图
php通过array_merge()函数合并两个数组的方法
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 CMS SQL jQuery C# C++ java Android IOS oracle MongoDB PostgreSQL SQLite 交通频道 温州-深圳 奉化-郑州 诸城-马鞍山 池州-漳州 莱西-铜仁 嘉峪关-宜昌 菏泽-韶关 宿州-寿光 随州-上虞 普兰店-淮安 铜仁-濮阳 徐州-吉林 莱西-河源 桂林-巴中 永州-府谷 安吉-桓台 泰兴-肥城 龙岩-铁岭 余姚-清远 宣城-蓟县 荥阳-铜陵 大理-荆州 海宁-嵊州 深圳-宣城 晋中-海安 郫县-汕尾 潍坊-滕州 三明-池州 威海-新昌 江门-余姚 淮南-宜兴 张掖-诸城 四会-清远 德州-海安 驻马店-阿勒泰 宿迁-南昌 成都-阳江 中卫-来宾 晋中-怒江 龙海-太原 商丘-海盐 仙桃-太仓 钦州-酒泉 周口-池州 肥城-无锡 池州-文山 恩施-中卫 郑州-吐鲁番 聊城-青州 合肥-赣州 德清-济宁 玉林-乳山 景德镇-德州 抚顺-莱西 遵化-乌海 南昌-铜仁 玉林-常德 库尔勒-抚州 辽源-海安 衡水-青岛 本溪-章丘 绥化-红河 济南-铜陵 都江堰-日照 新泰-宜兴 贵阳-昭通 铜陵-迁安 蓟县-延安 仪征-乌鲁木齐 长春-海东 威海-阿坝 双流-寿光 无锡-广元 佛山-广州 巢湖-威海 曲靖-蚌埠 潍坊-新密 江都-晋中 佳木斯-六盘水 烟台-沈阳 青岭子-尚志 仙人桥-柳毛沟 向塘-郓城 福安-于都 金沟屯-白旗 汝箕沟-呼鲁斯太 淄博-天津南 长春-株洲 宣威-滕州 永康南-韶山南 松河-平关 依安-孙吴 湖州-武夷山北 三汇镇-渠县 哈尔滨-临泽 双城堡-徐州 苏州-温州南 四平东-营口东 关林-漳州 米沙子-刘家店 沈阳-大板 怀化南-枣庄 小得江-秧草地 内江-西安南 绥中北-丹东 黄羊镇-天祝 田梁子-孔滩 金马村-柏果 碾子山-高家 许昌-重庆北 高密-赤壁北 胶州-清河城 资阳-宜春 义乌-蚌埠南 克东-玉田县 新乡东-清远 辰溪-定州 成高子-牡丹江 白河县-城固 商丘-正定机场 新杖子-洞庙河 莆田-深圳北 阳泉北-缙云 大山铺-孔滩 热水-兴城 小榆树-白城 东莞-株洲 香兰-胶州 肃宁-武夷山 三门峡-衡水 高邑-巩义 镇江-九江 王府-铁岭 兴义-广州 水富-安顺 萨拉齐-中宁 厦门北-苏州园区 哈力图-普兰店 鲁番-大田边 铁岭-台前 柏林-临江场 南博山-淄博 南阳-泊头 勃利-东京城 后寨-东田良 花园-大虎山 老岭-铁厂 包头东-西小召 沧州西-驻马店西 广州-固原 浮图峪-南观村 隆安东-云浮东 上海南-迁安 杨陵南-闻喜西 潢川-唐河 长治北-什里店 德清西-平顶山 定边-蚌埠 沙城-岳阳 溆浦南-余姚北

Copyright © 2016 phpStudy |