德清设计-专注于DISCUZ模板风格开发
  • 登录
  • 加入德清
  • 腾讯QQ
  • 微博登录
  • 德清设计 官方论坛:http://www.dzstyle.cn 官方指定QQ:67650701 德清设计QQ交流群:262199103
    德清设计 DISCUZ应用中心:https://addon.dismall.com/?@gavin
    除应用中心,其他任何地方都是盗版,请认准德清设计在应用中心的地址,除此外给您造成的任何损失都与我们无关!谢谢您的支持!

    查看: 5105|回复: 0

    [交流] dz官方发布 百变幻灯片,完全DIY(高级教程)

    [复制链接]

    133

    主题

    194

    帖子

    1894

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1894
    发表于 2013-10-25 12:18:41 | 显示全部楼层 |阅读模式
    21.3K

    登录后才能看到所有内容,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?加入德清

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

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


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

    点击 添加按扭 如下图所示



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

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

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



    接下来 我们输入代码

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

    复制代码

    其中的div可以是任意标签,如table,span等,我们这里以div为例

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



    接下来,我们增加幻灯代码  下面代码用来实现图片(或内容)的显示作用 属性必须为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}为图片高度变量

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

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

    复制代码

    完整代码如下

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

    复制代码

    接下来 为滑动条增加数字

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

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

    复制代码

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

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

    • <script type="text/javascript">
    • runslideshow();
    • </script>

    复制代码


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

    • <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>

    复制代码


    如下图所示



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

    如下图所示 调用




    显示效果




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

    下面讲解一些高级参数

    1、滑动条如何控制让用户点击还是滑动  
          在<div class="slidebar"> 中加入参数  (鼠标滑动)mevent="mouseover"  或   (鼠标点击)mevent="click"   
          完整代码如下  以下代码实现 点击后变换
    • <div class="slidebar" mevent="click">
    • [loop1]<span>{currentorder}</span>[/loop1]
    • </div>

    复制代码


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



       
        添加如下代码即可实现
    • <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、如何实现 一次显示多个图片,每次切换多个 如下图样式



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

    • <div class="slidebox"  slidenum="3" slidestep="1">

    复制代码

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


    以上为幻灯片的所有功能

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

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

    效果一



    实现代码

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

    复制代码


    效果二




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

    复制代码


    效果三




    实现代码

    • <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">
    • [loop]<li><a href="{url}"{target}><img src="{avatar_big}" width="{picwidth}" height="{picheight}" /></a><p><a href="{url}"{target}>{title}</a></p></li>[/loop]
    •                     </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>


    复制代码


    效果四




    实现代码

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

    复制代码


    效果五




    实现代码

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

    复制代码


    效果六



    实现代码

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

    复制代码


    效果七


    实现代码  

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

    复制代码


    效果八



    实现代码

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

    复制代码


    效果九




    实现代码

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

    复制代码


    效果十




    实现代码

    • <div class="slidebox">
    • <div class="bignews">
    •                 <div class="slideshow">
    •                         [loop]
    •                     <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
    •                         [/loop]
    •             </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">
    •                                         [loop1]
    •                                         <em>{currentorder}</em>
    •                                         [/loop1]
    •                                 </span>
    •                     <em class="slidebardown"><img src="template/default/portal/home/images/bignews_right.gif" /></em>
    •             </div>
    •               <div class="slideother">
    •                         [loop2]
    •             <dd >
    •                 <h2><a href="{url}"{target}>{title}</a></h2>
    •                 <p><a href="{url}"{target}>{summary}</a></p>
    •                         </dd>
    •                         [/loop2]
    •                </div>
    •         </div>
    • </div>
    • <script type="text/javascript">
    • runslideshow();
    • </script>


    复制代码


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

    百变幻灯 随你而变

    感谢大家
    应用中心地址:http://addon.discuz.com/?@3159.developer
    官方论坛:http://www.dzstyle.cn
    德清设计-专注DISCUZ模板开发
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 加入德清

    本版积分规则

    网站首页|模板展示|购买模板|购买须知|售后服务|联系我们|Archiver|手机版|小黑屋
    Powered by Discuz! X3.2© 2001-2015 Comsenz Inc. 版权所有 ( 冀ICP备08108040号-3 )  Design: 德清设计      
    快速回复 返回顶部 返回列表