论坛 › 站长交流中心 › dz官方发布 百变幻灯片，完全DIY（高级教程）

admin 发表于 2013-10-25 12:18:41

dz官方发布 百变幻灯片，完全DIY（高级教程）

在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片

请跟随教程从头到尾仔细阅读，你将收获不小


第一步制作幻灯片：后台--》门户--》模块模板

点击 添加按扭 如下图所示

http://att.discuz.net/data/attachment/forum/201009/25/104830fllspp9p70aph4kl.gif.thumb.jpg

此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类

下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片”

把代码框里面的内容全部删除

http://att.discuz.net/data/attachment/forum/201009/25/105629vzabu955u65vbil5.gif.thumb.jpg

接下来 我们输入代码

首先在代码框里面输入
[*]<div class="slidebox"></div>

复制代码
其中的div可以是任意标签，如table，span等，我们这里以div为例

此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记
如下图所示

http://att.discuz.net/data/attachment/forum/201009/25/110757mamym5rummwmaso5.gif.thumb.jpg

接下来，我们增加幻灯代码下面代码用来实现图片（或内容）的显示作用 属性必须为class="slideshow"的标签


[*]<div class="slideshow"></div>

复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下


[*]<div class="slidebox">
[*]
[*]<div class="slideshow"></div>
[*]
[*]</div>

复制代码

接下来我们来增加“滑动”、“点击”的代码   


[*]<div class="slidebar"></div>

复制代码

上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下


[*]<div class="slidebox"><!--幻灯片开始-->
[*]
[*]<div class="slideshow"> </div><!--图片展示-->
[*]
[*]<div class="slidebar"> </div><!--幻灯片控制展示-->
[*]
[*]</div><!--幻灯片结束-->

复制代码
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码

在<div class="slideshow"> </div> 代码中间插入图片显示代码

如下代码

[*]<div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--图片展示-->

复制代码
其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量

接下来为图片增加循环代码 如下代码


[*]
[*]<img src="{pic}" width="{picwidth}" height="{picheight}" />
[*]

复制代码
完整代码如下


[*]<div class="slidebox"><!--幻灯片开始-->
[*]<div class="slideshow">
[*]
[*]<img src="{pic}" width="{picwidth}" height="{picheight}" />
[*]
[*]</div>
[*]<!--图片展示-->
[*]<div class="slidebar"> </div><!--幻灯片控制展示-->
[*]</div><!--幻灯片结束-->

复制代码
接下来 为滑动条增加数字

在<div class="slidebar"> </div>中增加娄字变量 如下代码


[*]<div class="slidebar">
[*]<span>{currentorder}</span>
[*]</div>

复制代码
其中{currentorder} 是当前显示的顺序数字,其中... 为循环，你可能注意到了，这里用了 ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的

最后增加脚本代码 如下以下代码放在模块代码的最后


[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>

复制代码

此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下


[*]<div class="slidebox"><!--幻灯片开始-->
[*]<div class="slideshow">
[*]
[*]<img src="{pic}" width="{picwidth}" height="{picheight}" />
[*]
[*]</div>
[*]<!--图片展示-->
[*]<div class="slidebar">
[*]<span>{currentorder}</span>
[*]</div><!--幻灯片控制展示-->
[*]</div><!--幻灯片结束-->
[*]
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>

复制代码

如下图所示

http://att.discuz.net/data/attachment/forum/201009/25/120149v1ebu4y0hxgyxuyp.gif

此时我们就可以通过前台DIY调用了

如下图所示 调用

http://att.discuz.net/data/attachment/forum/201009/25/134622m2qxzhjjjqcq30u7.gif


显示效果

http://att.discuz.net/data/attachment/forum/201009/25/134622vhl3ypt9c9mcpzp5.gif


至此简易幻灯片就完成了，需要你通过CSS样式来配合美化一下

下面讲解一些高级参数

1、滑动条如何控制让用户点击还是滑动
      在<div class="slidebar"> 中加入参数（鼠标滑动）mevent="mouseover"或   （鼠标点击）mevent="click"   
      完整代码如下以下代码实现 点击后变换

[*]<div class="slidebar" mevent="click">
[*]<span>{currentorder}</span>
[*]</div>

复制代码

2、如何实现上一个 下一个的效果 如下图样式

http://att.discuz.net/data/attachment/forum/201009/25/121844eljxg5xigjhy0z1b.gif

   
    添加如下代码即可实现

[*]<div class="slidebarup">
[*]<span>up</span>
[*]</div>
[*]
[*]<div class="slidebardown">
[*]<span>down</span>
[*]</div>

复制代码
标签为 class="slidebarup" 的为上一个    标签为class="slidebardown"的为下一个

3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法在需要展示的地方增加如下代码

[*]<div class="slideother">
[*]      <span>可以是任何内容</span>
[*]</div>

复制代码
同时支持多个slideother   如下代码


[*]<div class="slideother">
[*]      <span>内容一</span>
[*]</div>
[*]
[*]<div class="slideother">
[*]      <span>内容二</span>
[*]</div>
[*]

复制代码
4、如何控制幻灯片播放的速度
      在<div class="slidebox" >增加参数如下代码其中 timestep="3000"为毫秒

[*]<div class="slidebox" timestep="3000">

复制代码

5、如何实现 一次显示多个图片，每次切换多个 如下图样式

http://att.discuz.net/data/attachment/forum/201009/25/134058r7zm2hpbwgkggvpy.gif

   
      在<div class="slidebox" >增加参数如下代码


[*]<div class="slidebox"slidenum="3" slidestep="1">

复制代码
其中slidenum="3"表示显示数量， slidestep="1" 表示每点击一次左右按扭 移动的次数


以上为幻灯片的所有功能

下面提供演示站点中门户及频道所用到的幻灯片代码 （大家可以参照所提供的代码制作出炫丽的幻灯片）

以下所示效果都需要CSS配合

效果一
http://att.discuz.net/data/attachment/forum/201009/25/13520088xajhdphnb212xh.gif


实现代码


[*]<div class="slidebox">
[*]<div class="slideshow">
[*]                        
[*]                  <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
[*]                        
[*]</div>
[*]                <div class="bignews_btns">
[*]                  <div class="btns slidebar">
[*]                                    
[*]                        <em></em>
[*]                                                
[*]                        </div>
[*]                  <div class="desc slideother">
[*]
[*]                  <a href="{url}"{target}>{title}</a>
[*]
[*]</div>
[*]                      </div>
[*]</div>
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>

复制代码

效果二

http://att.discuz.net/data/attachment/forum/201009/25/135549ryht181zrsyz95rt.gif


实现代码

[*]<div class="slidebox" timestep="3000">
[*]                  <div class="thumb on slideshow" >
[*]                        
[*]               <span>
[*]                            <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
[*]                <p><a href="{url}"{target}>查看</a></p>
[*]                              </span>
[*]                        
[*]            </div>
[*]            <div class="product_desc">
[*]                  <div class="on slideother" >
[*]                              
[*]                              <span>
[*]                   <h2 class="title"><a href="{url}"{target}>{title}</a></h2>
[*]                  <p>{summary}</p>
[*]                                        </span>
[*]                              
[*]                     </div>
[*]                <div class="product_price on slideother" >
[*]                              
[*]                   <span>{dateline}</span>
[*]                                 
[*]                </div>
[*]                <div class="btns slidebar">
[*]                  <em>{currentorder}</em>
[*]                </div>
[*]            </div>
[*]          </div>
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>

复制代码

效果三

http://att.discuz.net/data/attachment/forum/201009/25/135850pvvceggwpucmg779.gif


实现代码


[*]<div class="slidebox" slidenum="3" slidestep="1" >
[*]<div class="leftbtn slidebarup"><a href="javascript:void(0);" mevent="click" ><img src="template/default/portal/index/images/commend_bg_2_leftbtn.gif" /></a></div>
[*]                        <div class="middle cl" >
[*]                        <ul class="slideshow">
[*]<li><a href="{url}"{target}><img src="{avatar_big}" width="{picwidth}" height="{picheight}" /></a><p><a href="{url}"{target}>{title}</a></p></li>
[*]                  </ul>
[*]                </div>
[*]                <div class="rightbtn slidebardown "><a href="javascript:void(0);" mevent="click"><img src="template/default/portal/index/images/commend_bg_2_rightbtn.gif" /></a></div>
[*]</div>
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>
[*]

复制代码

效果四

http://att.discuz.net/data/attachment/forum/201009/25/140207uommo8vowzu34oo3.gif


实现代码


[*]<div class="photobox cl slidebox" timestep="3000">
[*]                <div class="z leftbtn">
[*]                  <span>美食大赏</span>
[*]                              <div class="slidebar">
[*]
[*]                <em></em>
[*]
[*]                              </div>
[*]            </div>
[*]            <div class="y rightpic">
[*]                  <div class="slideshow">
[*]
[*]                              <div>
[*]                  <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
[*]                  <p><a href="{url}"{target}>{title}</a></p>
[*]                              </div>
[*]
[*]      </div>
[*]            </div>
[*]      </div>
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>

复制代码

效果五

http://att.discuz.net/data/attachment/forum/201009/25/140538iwogszf0j4nw8ffo.gif


实现代码


[*]<div class="z slidebox">
[*]                <div class="box slideshow">
[*]                        
[*]                <div>
[*]                <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>
[*]            </div>
[*]                        
[*]      </div>
[*]      <div class="box_btn cl slidebar">
[*]                        
[*]                <div>
[*]                  <span>{title}</span>
[*]            </div>
[*]            
[*]      </div>
[*]      <div class="box_desc slideother">
[*]                        
[*]                <p>
[*]                   <a href="{url}"{target}>{summary}</a></p>
[*]                        
[*]      </div>
[*]      </div>
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>

复制代码

效果六
http://att.discuz.net/data/attachment/forum/201009/25/140929dlvasjskdjcabshv.gif


实现代码


[*]<div class="bignews slidebox " >
[*]<div class="slideshow"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a></div>
[*]                <div class="btns slidebar">
[*]
[*]                  <em>{currentorder}</em>
[*]
[*]            </div>
[*]          </div>
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>

复制代码

效果七
http://att.discuz.net/data/attachment/forum/201009/25/141211mj687pn7f6sqfmm8.gif

实现代码


[*]<div class="slidebox ">
[*]      <div class="slideshow"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a></div>
[*]      <dd class="slidebar">
[*]
[*]                <em><a href="#"><img src="template/default/portal/food/images/num/0{currentorder}.gif" /></a></em>
[*]
[*]      </dd>
[*]      <div class="slideother">
[*]
[*]                <div><div class="title">
[*]                <a href="{url}"{target}>{title}</a>
[*]                </div>
[*]                <p>
[*]                        {summary}
[*]                </p></div>
[*]
[*]      </div>
[*]</div>
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>

复制代码

效果八
http://att.discuz.net/data/attachment/forum/201009/25/141531t9z4gwy0dggywr45.gif


实现代码


[*]<div class="bignews slidebox">
[*]                  <div class="picbox slideshow">
[*]                        <div><img src="{pic}" width="{picwidth}" height="{picheight}" /></div>
[*]                </div>
[*]                <div class="bignews_btn slidebar" mevent="mouseover" >
[*]                        
[*]                                        <div >
[*]                            <p>
[*]                              <strong><a href="{url}"{target}>{title}</a></strong>
[*]                            <em>{summary}</em>
[*]                           </p>
[*]                        <img src="{pic}" width="60" height="66"/>
[*]                        </div>
[*]                                       
[*]                </div>
[*]            </div>
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>

复制代码

效果九

http://att.discuz.net/data/attachment/forum/201009/25/1417587vtqtik09q2zzvtv.gif


实现代码


[*]<div class="slidebox">
[*]
[*]<div class="slideshow">
[*]                        
[*]                  <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
[*]                        
[*]</div>
[*]            <div class="btn">
[*]                <em class="slidebarup"><img src="template/default/portal/car/images/bignews_btn_left.gif" /></em>
[*]               <em class="slidebar"><span><img src="template/default/portal/car/images/empty_img.gif" width="8" height="8"/></span></em>
[*]                <em class="slidebardown"><img src="template/default/portal/car/images/bignews_btn_right.gif" /></em>
[*]            </div>
[*]            <div class="bignews_title slideother">
[*]                        
[*]               <em><a href="{url}"{target}>{title}</a></em>
[*]                        
[*]            </div>
[*]</div>
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>

复制代码

效果十

http://att.discuz.net/data/attachment/forum/201009/25/142146dzytfmsugfjxhgwm.gif


实现代码


[*]<div class="slidebox">
[*]<div class="bignews">
[*]                <div class="slideshow">
[*]                        
[*]                  <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
[*]                        
[*]            </div>
[*]      </div>
[*]      <div class="bignewsdesc">
[*]                <div class="bignewsbtn">
[*]                  <em class="slidebarup"><img src="template/default/portal/home/images/bignews_left.gif" /></em>
[*]                              <span class="slidebar">
[*]                                       
[*]                                        <em>{currentorder}</em>
[*]                                       
[*]                              </span>
[*]                  <em class="slidebardown"><img src="template/default/portal/home/images/bignews_right.gif" /></em>
[*]            </div>
[*]            <div class="slideother">
[*]                        
[*]            <dd >
[*]                <h2><a href="{url}"{target}>{title}</a></h2>
[*]                <p><a href="{url}"{target}>{summary}</a></p>
[*]                        </dd>
[*]                        
[*]               </div>
[*]      </div>
[*]</div>
[*]<script type="text/javascript">
[*]runslideshow();
[*]</script>
[*]

复制代码

大家可以参照上面提供的十套代码 仔细研究一下。

百变幻灯 随你而变

感谢大家

查看完整版本: dz官方发布 百变幻灯片，完全DIY（高级教程）