dedecms自增标签[field:global.autoindex/]的运用

  用bootstrap建站时用到幻灯片切换模块,里面有个active(下面代码中的data-slide-to="0"),其余的按顺序递增(1,2),如果用dedecms就可以用autoindex来替代,如下图中的切换小圆点,点击不同的圆点会切换不同的banner图片

    <div class="carousel slide" id="carousel-420353">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carousel-420353">
                    </li>
                    <li data-slide-to="1" data-target="#carousel-420353">
                    </li>
                    <li data-slide-to="2" data-target="#carousel-420353">
                    </li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img alt="" src="*/default1.jpg" />
                    </div>
                    <div class="item">
                        <img alt="" src="*/default2.jpg" />
                    </div>
                    <div class="item">
                        <img alt="" src="*/default3.jpg" />
                    </div>
                </div>
          <a class="left carousel-control" href="#carousel-420353" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
          <a class="right carousel-control" href="#carousel-420353" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
     </div>

  如果用上面的代码,要是更换活动时就得每次去修改代码,我们可以将活动设置为栏目文章进行调用,通过修改后的代码如下

    <div class="carousel slide" id="carousel-420353">
                <ol class="carousel-indicators">
            {dede:arclist row="1" typeid="3" flag='h' channelid='17'}
                    <li class="active" data-slide-to="0" data-target="#carousel-420353">
                    </li>
            {/dede:arclist}
            {dede:arclist row="3" typeid="3" noflag='h' channelid='17'}
                    <li data-slide-to="[field:global.autoindex/]" data-target="#carousel-420353">
                    </li>
                    {/dede:arclist}
                </ol>
                <div class="carousel-inner">
                {dede:arclist row="1" typeid="3" flag='h' channelid='17'}
                    <div class="item active">
                        <img alt="[field:title /]" src="[field:picname /]" />
                    </div>
                {/dede:arclist}
                {dede:arclist row="3" typeid="3" noflag='h' channelid='17'}
                <div class="item">
                        <img alt="[field:title /]" src="[field:picname /]" />
                    </div>
                {/dede:arclist}
                </div>
          <a class="left carousel-control" href="#carousel-420353" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
          <a class="right carousel-control" href="#carousel-420353" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
     </div>

  active我们用头条标签(h)进行定义,其余用noflag来设置,这样就可以比较完美的调用了,感兴趣的朋友可以试试,也欢迎和ytkah交流

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拂晓风起

cocos2d-js 入门 (主要是HTML5)

1495
来自专栏小俊博客

通过JS显示网站运行时间

69212
来自专栏前端人人

React第三方组件5(状态管理之Redux的使用④TodoList下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

3565
来自专栏ytkah

微信图文消息添加音乐一招搞定 只需修改背景音乐地址

  最近经常听网友问微信图文消息加音乐怎么弄,其实微信公众号添加音乐很简单,复制几行代码到公众平台图文素材中就能实现,只需修改一下背景音乐地址就可以了。   2...

3013
来自专栏从零开始学自动化测试

appium+python自动化56-微信小程序自动化

最近微信的小程序越来越多了,随之带来的问题是:小程序如何做自动化测试? 本篇以摩拜小程序为例,介绍如何定位小程序里面的元素

991
来自专栏ionic3+

【技巧】ionic3视频播放

一般视频的展示方式有两种:缩略图和直接播放,分别对应下面两种效果(可参考直播应用和今日头条视频):

1163
来自专栏每日一篇技术文章

weex-08-单击事件

792
来自专栏小俊博客

通过JS显示网站运行时间

1174
来自专栏coding

引用第三方样式库实现动画

animate.css是一个能渲染出炫酷效果的css库,只需引用该css库,在相应的元素上加上class类名,即可实现。

521
来自专栏PHP技术

CHROME开发者工具的小技巧

Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能...

32410

扫码关注云+社区