|
|
幻灯片不仅可以展示图片的完美效果，吸引视觉感，而且可以展示更多的信息，留住用户。通常的方法是使用JQ等代码来做，但容易导致JQ和默认的JS冲突(jQuery和Discuz js文件冲突解决办法)，今天在站帮网分享使用Discuz默认的DIY来实现调用幻灯片，以及各种不同的效果如何制作幻灯片。
一、幻灯片的制作流程：
1、制作幻灯片DIY模块：后台--》门户--》模块模板，点击 添加按扭，如下图所示：
此处可以可以选择不同的模块分类，如：附件类、帖子类、文章类、图片类等等，可以根据你的需要选择不同的模块分类。
下面我们以文章类为例来讲解，选择文章分类，点提交，如下图所示。为新建的模块起个名字 如 “百变幻灯片” ，把代码框里面的内容全部删除 。
1.1、我们输入代码 ，首先在代码框里面输入：- <div class="slidebox"></div>
[color=rgb(51, 102, 153) !important]复制代码
其中的div可以是任意标签，如table，span等，我们这里以div为例。此处的标签必须加一个class="slidebox"的属性，如下面代码所示 ，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记。如下图所示：
1.2、我们增加幻灯代码，下面代码用来实现图片（或内容）的显示作用，属性必须为class="slideshow"的标签。- <div class="slideshow"></div>
[color=rgb(51, 102, 153) !important]复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面，上面已经讲过 ，完整代码如下：- <div class="slidebox">
- <div class="slideshow"></div>
- </div>
[color=rgb(51, 102, 153) !important]复制代码
1.3、我们来增加“滑动”、“点击”的代码- <div class="slidebar"></div>
[color=rgb(51, 102, 153) !important]复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面，上面已经讲过 ，完整代码如下：- <div class="slidebox"><!--幻灯片开始-->
- <div class="slideshow"> </div><!--图片展示-->
- <div class="slidebar"> </div><!--幻灯片控制展示-->
- </div><!--幻灯片结束-->
[color=rgb(51, 102, 153) !important]复制代码
以上代码已完成幻灯片的框架，接下来我们为幻灯片添加数据代码 ，在<div class="slideshow"> </div> 代码中间插入图片显示代码，如下代码：- <div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--图片展示-->
[color=rgb(51, 102, 153) !important]复制代码
其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量
1.4、为图片增加循环代码，如下代码：- [loop]
- <img src="{pic}" width="{picwidth}" height="{picheight}" />
- [/loop]
[color=rgb(51, 102, 153) !important]复制代码
完整代码如下：- <div class="slidebox"><!--幻灯片开始-->
- <div class="slideshow">
- [loop]
- <img src="{pic}" width="{picwidth}" height="{picheight}" />
- [/loop]
- </div>
- <!--图片展示-->
- <div class="slidebar"> </div><!--幻灯片控制展示-->
- </div><!--幻灯片结束-->
[color=rgb(51, 102, 153) !important]复制代码
1.5、为滑动条增加数字
在<div class="slidebar"> </div>中增加娄字变量，如下代码：- <div class="slidebar">
- [loop1]<span>{currentorder}</span>[/loop1]
- </div>
[color=rgb(51, 102, 153) !important]复制代码
其中{currentorder} 是当前显示的顺序数字 ,其中[loop1]...[/loop1] 为循环，你可能注意到了，这里用了[loop1]，如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推来实现多处循环的目的 。
1.6、增加脚本代码， 以下代码放在模块代码的最后：- <script type="text/javascript">
- runslideshow();
- </script>
[color=rgb(51, 102, 153) !important]复制代码
此时一个简单的幻灯片模块就完成了 ，幻灯片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>
[color=rgb(51, 102, 153) !important]复制代码
代码如下图所示：
2、此时我们就可以通过前台DIY调用做好的幻灯片模块了 ，如下图调用所示：
3、显示效果如下图所示：
至此简易幻灯片就完成了，需要你通过CSS样式来配合美化一下。
二、下面讲解一些高级参数
1、滑动条如何控制让用户点击还是滑动
在<div class="slidebar"> 中加入参数，（鼠标滑动）mevent="mouseover" 或 （鼠标点击）mevent="click"，完整代码如下，以下代码实现点击后变换：- <div class="slidebar" mevent="click">
- [loop1]<span>{currentorder}</span>[/loop1]
- </div>
[color=rgb(51, 102, 153) !important]复制代码
2、如何实现上一个、下一个的效果，如下图样式：
添加如下代码即可实现：- <div class="slidebarup">
- <span>up</span>
- </div>
- <div class="slidebardown">
- <span>down</span>
- </div>
[color=rgb(51, 102, 153) !important]复制代码
标签为 class="slidebarup" 的为上一个 标签为 class="slidebardown" 的为下一个。
3、当 slideshow的内容展示不全或不在一个区域时，我们提供了更多内容的展示方法，在需要展示的地方增加如下代码：- <div class="slideother">
- <span>可以是任何内容</span>
- </div>
[color=rgb(51, 102, 153) !important]复制代码
同时支持多个slideother，如下代码：- <div class="slideother">
- <span>内容一</span>
- </div>
- <div class="slideother">
- <span>内容二</span>
- </div>
[color=rgb(51, 102, 153) !important]复制代码
4、如何控制幻灯片播放速度
在<div class="slidebox" >增加参数，，其中 timestep="3000" 为毫秒，如下代码：- <div class="slidebox" timestep="3000">
[color=rgb(51, 102, 153) !important]复制代码
5、如何实现 一次显示多个图片，每次切换多个，如下图样式：
在<div class="slidebox" >增加参数，如下代码：- <div class="slidebox" slidenum="3" slidestep="1">
[color=rgb(51, 102, 153) !important]复制代码
其中 slidenum="3" 表示显示数量 ， slidestep="1" 表示每点击一次左右按扭，移动的次数。
以上为幻灯片的所有功能，你可以根据需要组合不同的需求，再配合CSS做出各类幻灯片效果。
三、下面提供演示站点中门户及频道所用到的幻灯片代码 （大家可以参照所提供的代码制作出炫丽的幻灯片）
以下所示效果都需要CSS配合
1、效果一：
参考频道模板：Discuz! X2.5门户模板下
http://bbs.lezsc.com/thread-309-1-1.html
DIY模块实现代码- <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>
[color=rgb(51, 102, 153) !important]复制代码
2、效果二
参考频道模板：Discuz! X2.5门户模板下载
DIY模块实现代码- <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>
[color=rgb(51, 102, 153) !important]复制代码
3、效果三
参考频道模板：Discuz! X2.5门户模板下载
DIY模块实现代码- <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>
[color=rgb(51, 102, 153) !important]复制代码
4、效果四
参考频道模板：Discuz! X2.5门户模板下载
DIY模块实现代码- <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>
[color=rgb(51, 102, 153) !important]复制代码
5、效果五
参考频道模板：Discuz x2.5婚嫁类门户模板发布下载
DIY模块实现代码- <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>
[color=rgb(51, 102, 153) !important]复制代码
6、效果六
参考频道模板：Discuz x2.5 美食频道模板发布
DIY模块实现代码- <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>
[color=rgb(51, 102, 153) !important]复制代码
7、效果七
参考频道模板：Discuz x2.5 美食频道模板发布
DIY模块实现代码- <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>
[color=rgb(51, 102, 153) !important]复制代码
8、效果八
参考频道模板：Discuz x2.5 亲子频道模板发布
DIY模块实现代码- <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>
[color=rgb(51, 102, 153) !important]复制代码
9、效果九
参考频道模板：Discuz x2.5 汽车频道门户模板下载
DIY模块实现代码- <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>
[color=rgb(51, 102, 153) !important]复制代码
10、效果十
参考频道模板：Discuz x2.5 家居类门户模板
DIY模块实现代码- <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>
[color=rgb(51, 102, 153) !important]复制代码
大家可以参照上面提供的十套代码，仔细研究一下，百变幻灯 随你而变。想要更好的制作Discuz模板请看：Discuz模板的制作方法。
|
|
官溪人太厉害了。
窥视卡
雷达卡
发表于 2013-12-20 05:06:15
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
发表于 2014-5-21 23:41:50
发表于 2014-5-27 23:15:33
发表于 2014-6-9 00:43:57
