bootstrape 轮播插件
来源:互联网 发布:网络博物馆 编辑:程序博客网 时间:2024/05/17 00:15
bootstrape的插件名称
carousel.js
插件地址:
http://v3.bootcss.com/javascript/#carousel
样例效果
样例代码
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <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"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </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 data-ride="carousel" class="carousel slide pr-carousel" id="carousel-container"> <#-- 图片容器 --> <div class="carousel-inner pr-carousel-inner"> <#if vacationImgs??> <#list vacationImgs as list> <#if list_index==0> <div class="item active"><img src="${list.imgUrl}" ></div> <#else> <div class="item"><img src="${list.imgUrl}" ></div> </#if> </#list> </#if> </div> <#-- 指示符 --> <ol class="carousel-indicators pr-carousel-indicators"> <#if vacationImgs??> <#list vacationImgs as list><#-- <li> <a href='javascript:void(0);'><img src="${list.imgUrl}" width='80px' height='80px' bigimg='${list.imgUrl}' /></a> </li> --> <li data-slide-to="${list_index}" data-target="#carousel-container"> <img src="${list.imgUrl}" > </li> </#list> </#if> </ol> </div>
陷阱:
class=“item” 的标签只能有一个 是active ,否则不能出现想要的效果
0 0
- bootstrape 轮播插件
- bootstrape,根据图片数量(通用)轮播
- 图片轮播插件
- 图片轮播插件
- BootStrap 轮播插件
- 封装轮播插件
- jquery轮播插件
- Bootstrap轮播插件
- bootstrap轮播插件
- 轮播插件
- jQuery 图片轮播插件
- jQuery 图片轮播插件
- 简单图片轮播插件
- 推荐轮播插件--touchSlidertouchSlider
- JQuery图片轮播插件
- swiper图片轮播插件
- js 图片轮播插件
- jq编写轮播插件
- windbg调试应用层程序
- android adb push apk&jar重启机子无效
- rpm 按时间排序查询列出名称,版本,发布号,架构,时间
- WebSocket编程-sunliggggg
- wait_queue_head_t和wait_queue_t
- bootstrape 轮播插件
- [精通Objective-C]进阶技巧:使用ARC
- android查看input设备
- android studio png图片问题
- 分享一个赌博机系统
- 一些有用的php片段
- android查看内存使用情况
- Linux系统概述
- 宇宙星空空间HDRI全景图图像合辑