脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → thinkphp标签实现bootsrtap轮播

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

 更新时间：2017年02月19日 10:57:47   作者：QTFYING  
这篇文章给大家介绍thinkphp标签实现bootsrtap轮播carousel实例代码，非常不错，具有参考借鉴价值，需要的的朋友参考下

由于轮播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实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

相关文章

  • 关于TypeScript中import JSON的正确姿势详解

    关于TypeScript中import JSON的正确姿势详解

    2012年10月首度对外公布typescript（当时已经是0.7？的版本）同时开源，ts的编译器是用js编写的（后来改成ts？），可以在线编写。下面这篇文章主要给大家介绍了关于TypeScript中import JSON的正确姿势，需要的朋友可以参考下。
    2017-07-07
  • javascript运行机制之执行顺序理解

    javascript运行机制之执行顺序理解

    这篇文章主要介绍了javascript运行机制之执行顺序理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Z-Blog中用到的js代码

    Z-Blog中用到的js代码

    Z-Blog中用到的js代码...
    2007-03-03
  • javascript实现获取服务器时间

    javascript实现获取服务器时间

    本文给大家总结了一下使用javascript来获取服务器时间的几种方法和思路，十分的简单明了，有需要的小伙伴可以参考下
    2015-05-05
  • 12个提高JavaScript技能的概念(小结)

    12个提高JavaScript技能的概念(小结)

    这篇文章主要介绍了12个提高JavaScript技能的概念(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 使用javascript控制cookie显示和隐藏背景图

    使用javascript控制cookie显示和隐藏背景图

    本文主要介绍了使用javascript来控制背景图片的显示和隐藏，当点击关闭按钮时，控制CSS使页面不加载背景图，同时记录COOKIE相关参数，并设置cookie的有效期
    2014-02-02
  • 判断输入的字符串是否是日期格式的简单方法

    判断输入的字符串是否是日期格式的简单方法

    下面小编就为大家带来一篇js判断输入的字符串是否是日期格式的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • ajax如何实现页面局部跳转与结果返回

    ajax如何实现页面局部跳转与结果返回

    AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，本篇文章给大家介绍ajax如何实现页面局部跳转与结果返回，感兴趣的朋友一起来学习
    2015-08-08
  • JavaScript 中获取数组最后一个元素方法汇总

    JavaScript 中获取数组最后一个元素方法汇总

    在JavaScript中，获取数组最后一个元素的方法有很多种。今天我们就来汇总一下JavaScript获取数组最后一个元素的几种方法,需要的朋友可以参考下
    2023-02-02
  • 如何防止JavaScript自动插入分号

    如何防止JavaScript自动插入分号

    JavaScript语言有一个机制：在解析时，能够在一句话后面自动插入一个分号，用来修改语句末尾遗漏的分号分隔符。然而，由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突，即所有空格符都被忽略，因此程序可以利用空格格式化代码
    2015-11-11

最新评论