thinkphp标签实现bootsrtap轮播carousel实例代码


Posted in Javascript onFebruary 19, 2017

由于轮播carousel第一个div需要设置active样式才能正常显示,上面的圆点也同样需要数字,

使用volist标签在循环的同时可以取得下标(foreach,for标签实现不了)

<div class="Container">
<!-- carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<volist name="bopic" id="xt">
<li data-target="#carousel-example-generic" data-slide-to="{$i-1}" class="<if condition="$i eq 1 ">active</if>"></li>
</volist>
</ol>
<div class="carousel-inner">
<volist name="bopic" id="xt">
<div class='item <if condition="$i eq 1 ">active</if>'>
<img src="{$xt.page_bopic_image}" alt="{$xt.page_bopic_seo}"/>
</div>
</volist>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /.carousel -->
</div>

以上所述是小编给大家介绍的thinkphp标签实现bootsrtap轮播carousel实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
初识Node.js
Mar 20 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
Jqprint实现页面打印
Jan 06 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
Ajax实现三级联动效果
Oct 05 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 #Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 #Javascript
RequireJs的使用详解
Feb 19 #Javascript
Vue.js -- 过滤器使用总结
Feb 18 #Javascript
JS打开摄像头并截图上传示例
Feb 18 #Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 #Javascript
AngularJS表单提交实例详解
Feb 18 #Javascript
You might like
如何使用PHP中的字符串函数
2006/11/24 PHP
分享PHP入门的学习方法
2007/01/02 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
javascript中的隐式调用
2018/02/10 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python从零开始创建区块链
2018/03/06 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python求质数列表的例子
2019/11/24 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
家长学校教学计划
2015/01/19 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript