Discuz X DIY幻灯片代码结构

本文由清尘发表于2011-07-11 13:11最后修改于2014-04-23属于Discuz分类

Discuz X DIY幻灯片代码结构:
    <div class=”slidebox“><!–幻灯片开始–>

        <!–图片展示–>
        <div class=”slideshow“>
            [loop]
            <img src=”{pic}” width=”{picwidth}” height=”{picheight}” /> 
            [/loop]
        </div>
        <!–幻灯片控制展示–>
        <div class=”slidebar“> 
            [loop1]
            <span>{currentorder}</span>
            [/loop1]
        </div>
    </div><!–幻灯片结束–>
    <script type=”text/javascript”>
    runslideshow();
    </script>

其它一些高级参数:
一、滑动条如何控制让用户点击还是滑动
在<div class=”slidebar”> 中加入参数  (鼠标滑动)mevent=”mouseover”  或   (鼠标点击)mevent=”click”   
    完整代码如下  以下代码实现 点击后变换:
    <div class=”slidebar” mevent=”click”
        [loop1]<span>{currentorder}</span>[/loop1]
    </div>
二、如何实现上一个、下一个的效果
添加如下代码即可实现
    <div class=”slidebarup”>
        <span>up</span>
    </div>
    <div class=”slidebardown”>
        <span>down</span>
    </div>
标签为 class=”slidebarup” 的为上一个    标签为  class=”slidebardown”  的为下一个 。
三、当 slideshow的内容展示不全或不在一个区域时,在需要展示的地方增加如下代码:
    <div class=”slideother“>
            <span>可以是任何内容</span>
    </div>
同时支持多个slideother   如下代码
    <div class=”slideother”>
            <span>内容一</span>
    </div>
    
    <div class=”slideother”>
            <span>内容二</span>
    </div>
四、如何控制幻灯片播放的速度 
      在<div class=”slidebox” >增加参数  如下代码  其中 timestep=”3000″  为毫秒 
        <div class=”slidebox” timestep=”3000″>
五、如何实现 一次显示多个图片,每次切换多个 如下图样式

131850gbcf0zyt0iiggtpt

 在<div class=”slidebox” >增加参数  如下代码 
    <div class=”slidebox”  slidenum=”3″ slidestep=”1″>
其中  slidenum=”3″  表示显示数量  , slidestep=”1″ 表示每点击一次左右按扭 移动的次数