admin   发表于 2015-5-18 15:20:50 |栏目: |分类:美化教程
         在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>


复制代码

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

百变幻灯 随你而变
从事Discuz周边研究开发8年多,熟悉SEO、运营等,解决各种discuz问题.有偿建站仿站。QQ:537209468
服务器只买1云,1云服务器半价。
  • TA的每日心情
    开心
    2017-4-28 08:55
  • 签到天数: 63 天

    [LV.6]常住居民II

    一生

    正式站长

    一生   发表于 2015-8-7 12:51:44 |栏目:
    正需要
  • TA的每日心情
    开心
    2017-4-28 08:55
  • 签到天数: 63 天

    [LV.6]常住居民II

    一生

    正式站长

    一生   发表于 2015-8-9 12:33:47 |栏目:
    正需要,学习了!
  • TA的每日心情
    开心
    2017-4-26 08:20
  • 签到天数: 74 天

    [LV.6]常住居民II

    飞舞的英雄

    大虾站长

    飞舞的英雄   发表于 2015-8-17 10:54:08 |栏目:
    真是被感动的痛哭流涕……
  • TA的每日心情
    开心
    2018-5-3 16:17
  • 签到天数: 64 天

    [LV.6]常住居民II

    忘记月亮

    正式站长

    忘记月亮   发表于 2015-8-17 18:33:25 |栏目:
    强烈支持楼主ing……
    服务器只买1云,1云服务器半价。
  • TA的每日心情
    难过
    2016-8-19 08:05
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    薛海维

    新手上路

    薛海维   发表于 2015-9-5 17:37:27 |栏目:
    确实是难得好帖啊,顶先
  • TA的每日心情
    开心
    2018-5-20 06:48
  • 签到天数: 71 天

    [LV.6]常住居民II

    白衫少年

    正式站长

    白衫少年   发表于 2015-11-3 08:45:11 |栏目:
    正需要,支持楼主大人了!
    服务器只买1云,1云服务器半价。
  • TA的每日心情
    慵懒
    2016-11-22 08:00
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    风在云颠

    新手上路

    风在云颠   发表于 2016-11-20 23:15:02 |栏目:
    这个帖一般般,还可以哦。
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    作者相关信息

    更多discuzx模板

    极品资源

    原创模板

    下载排行

    热门标签

    快速回复 返回顶部 返回列表