制作风格——百变幻灯片，完全DIY（高级教程）

最新推荐文章于 2021-11-03 09:42:56 发布
最新推荐文章于 2021-11-03 09:42:56 发布
阅读量566 收藏
点赞数
分类专栏： discuz建站
第一步制作幻灯片：后台--》门户--》模块模板

点击 添加按扭 如下图所示

1.gif



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

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

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

2.gif



接下来 我们输入代码 

首先在代码框里面输入

  1. <div class="slidebox"></div>
复制代码
其中的div可以是 任意标签 ，如table，span等，我们这里以div为例

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

3.gif



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

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

  1. <div class="slidebox">

  3. <div class="slideshow"></div>

  5. </div>
复制代码

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

  1. <div class="slidebar"></div>
复制代码

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

  1. <div class="slidebox"><!--幻灯片开始-->

  3. <div class="slideshow"> </div><!--图片展示-->

  5. <div class="slidebar"> </div><!--幻灯片控制展示-->

  7. </div><!--幻灯片结束-->
复制代码
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码 

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

如下代码 
  1. <div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--图片展示-->
复制代码
其中{pic} 为图片地址 变量 ， {picwidth}为图片宽度变量，{picheight}为图片高度变量

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

  1. [loop]
  2. <img src="{pic}" width="{picwidth}" height="{picheight}" /> 
  3. [/loop]
复制代码
完整代码如下

  1. <div class="slidebox"><!--幻灯片开始-->
  2. <div class="slideshow">
  3. [loop]
  4. <img src="{pic}" width="{picwidth}" height="{picheight}" /> 
  5. [/loop]
  6. </div>
  7. <!--图片展示-->
  8. <div class="slidebar"> </div><!--幻灯片控制展示-->
  9. </div><!--幻灯片结束-->
复制代码
接下来 为滑动条增加数字 

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

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

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

  1. <script type="text/javascript">
  2. runslideshow();
  3. </script>
复制代码

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

  1. <div class="slidebox"><!--幻灯片开始-->
  2. <div class="slideshow">
  3. [loop]
  4. <img src="{pic}" width="{picwidth}" height="{picheight}" /> 
  5. [/loop]
  6. </div>
  7. <!--图片展示-->
  8. <div class="slidebar"> 
  9. [loop1]<span>{currentorder}</span>[/loop1]
  10. </div><!--幻灯片控制展示-->
  11. </div><!--幻灯片结束-->

  13. <script type="text/javascript">
  14. runslideshow();
  15. </script>
复制代码

如下图所示 

5.gif



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

如下图所示 调用

61.gif




显示效果

71.gif




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

下面讲解一些高级参数 

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

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

8.gif



    
    添加如下代码即可实现
  1. <div class="slidebarup">
  2. <span>up</span>
  3. </div>

  5. <div class="slidebardown">
  6. <span>down</span>
  7. </div>
复制代码
标签为 class="slidebarup" 的为上一个    标签为  class="slidebardown"  的为下一个  

3、 当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法  在需要展示的地方增加如下代码
  1. <div class="slideother">
  2.         <span>可以是任何内容</span>
  3. </div>
复制代码
同时支持多个slideother   如下代码

  1. <div class="slideother">
  2.         <span>内容一</span>
  3. </div>

  5. <div class="slideother">
  6.         <span>内容二</span>
  7. </div>
复制代码
4、 如何控制幻灯片播放的速度 
      在<div class="slidebox" >增加参数  如下代码  其中 timestep="3000"  为毫秒 
  1. <div class="slidebox" timestep="3000">
复制代码

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

9.gif



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

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


以上为幻灯片的所有功能

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

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

效果一

a1.gif




实现代码

  1. <div class="slidebox">
  2. <div class="slideshow">
  3.                         [loop]
  4.                     <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
  5.                         [/loop]
  6. </div>
  7.                 <div class="bignews_btns">
  8.                     <div class="btns slidebar">
  9.                                      [loop1]
  10.                         <em></em>
  11.                                                 [/loop1]
  12.                           </div>
  13.                     <div class="desc slideother">
  14. [loop2]
  15.                     <a href="{url}"{target}>{title}</a>
  16. [/loop2]
  17. </div>
  18.                       </div>
  19. </div>
  20. <script type="text/javascript">
  21. runslideshow();
  22. </script>
复制代码

效果二

a2.gif




实现代码
  1. <div class="slidebox" timestep="3000">
  2.                   <div class="thumb on slideshow" >
  3.                         [loop]
  4.                <span>
  5.                             <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
  6.                 <p><a href="{url}"{target}>查看</a></p>
  7.                                 </span>
  8.                         [/loop]
  9.             </div>
  10.             <div class="product_desc">
  11.                     <div class="on slideother" >
  12.                                 [loop1]
  13.                                 <span>
  14.                    <h2 class="title"><a href="{url}"{target}>{title}</a></h2>
  15.                     <p>{summary}</p>
  16.                                         </span>
  17.                                 [/loop1]        
  18.                        </div>
  19.                 <div class="product_price on slideother" >
  20.                                 [loop2]
  21.                    <span>{dateline}</span>
  22.                                    [/loop2]
  23.                 </div>
  24.                 <div class="btns slidebar">
  25.                     [loop3]<em>{currentorder}</em>[/loop3]
  26.                 </div>
  27.             </div>
  28.           </div>
  29. <script type="text/javascript">
  30. runslideshow();
  31. </script>
复制代码

效果三

a3.gif




实现代码

  1. <div class="slidebox" slidenum="3" slidestep="1" >
  2. <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>
  3.                         <div class="middle cl" >
  4.                         <ul class="slideshow">
  5. [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]
  6.                     </ul>
  7.                 </div>
  8.                 <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>
  9. </div>
  10. <script type="text/javascript">
  11. runslideshow();
  12. </script>
复制代码

效果四

a4.gif




实现代码

  1. <div class="photobox cl slidebox" timestep="3000">
  2.                 <div class="z leftbtn">
  3.                     <span>美食大赏</span>
  4.                                 <div class="slidebar">
  5. [loop]
  6.                 <em></em>
  7. [/loop]
  8.                                 </div>
  9.             </div>
  10.             <div class="y rightpic">
  11.                     <div class="slideshow">
  12. [loop1]
  13.                                 <div>
  14.                     <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
  15.                     <p><a href="{url}"{target}>{title}</a></p>
  16.                                 </div>
  17. [/loop1]
  18.         </div>
  19.             </div>
  20.         </div>
  21. <script type="text/javascript">
  22. runslideshow();
  23. </script>
复制代码

效果五

a5.gif




实现代码

  1. <div class="z slidebox">
  2.                 <div class="box slideshow">
  3.                         [loop]
  4.                 <div>
  5.                 <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"  /></a>
  6.             </div>
  7.                         [/loop]
  8.         </div>
  9.         <div class="box_btn cl slidebar">
  10.                         [loop1]
  11.                 <div>
  12.                     <span>{title}</span>
  13.             </div>
  14.             [/loop1]
  15.         </div>
  16.         <div class="box_desc slideother">
  17.                         [loop2]
  18.                 <p>
  19.                    <a href="{url}"{target}>{summary}</a></p>
  20.                         [/loop2]
  21.         </div>
  22.         </div>
  23. <script type="text/javascript">
  24. runslideshow();
  25. </script>
复制代码

效果六

a6.gif




实现代码

  1. <div class="bignews slidebox " >
  2. <div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>
  3.                 <div class="btns slidebar">
  4. [loop1]
  5.                     <em>{currentorder}</em>
  6. [/loop1]
  7.               </div>
  8.           </div>
  9. <script type="text/javascript">
  10. runslideshow();
  11. </script>
复制代码

效果七

a7.gif



实现代码  

  1. <div class="slidebox "> 
  2.         <div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>
  3.         <dd class="slidebar">
  4. [loop1]
  5.                 <em><a href="#"><img src="template/default/portal/food/images/num/0{currentorder}.gif" /></a></em>
  6. [/loop1]
  7.         </dd>
  8.         <div class="slideother">
  9. [loop2]
  10.                 <div><div class="title">
  11.                 <a href="{url}"{target}>{title}</a>
  12.                 </div>
  13.                 <p>
  14.                         {summary}
  15.                 </p></div>
  16. [/loop2]
  17.         </div>
  18. </div>
  19. <script type="text/javascript">
  20. runslideshow();
  21. </script>
复制代码

效果八

a8.gif




实现代码

  1. <div class="bignews slidebox">
  2.                     <div class="picbox slideshow">
  3.                         [loop]<div><img src="{pic}" width="{picwidth}" height="{picheight}" /></div>[/loop]
  4.                 </div>
  5.                 <div class="bignews_btn slidebar" mevent="mouseover" >
  6.                         [loop1]
  7.                                         <div > 
  8.                             <p>
  9.                                 <strong><a href="{url}"{target}>{title}</a></strong>
  10.                             <em>{summary}</em>
  11.                            </p>
  12.                         <img src="{pic}" width="60" height="66"  />
  13.                           </div>
  14.                                         [/loop1]
  15.                 </div>
  16.             </div>
  17. <script type="text/javascript">
  18. runslideshow();
  19. </script>
复制代码

效果九

a9.gif




实现代码

  1. <div class="slidebox">

  3. <div class="slideshow">
  4.                         [loop]
  5.                     <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
  6.                         [/loop]
  7. </div>
  8.             <div class="btn">
  9.                 <em class="slidebarup"><img src="template/default/portal/car/images/bignews_btn_left.gif" /></em>
  10.                <em class="slidebar">[loop1]<span><img src="template/default/portal/car/images/empty_img.gif" width="8" height="8"/></span>[/loop1]</em>
  11.                 <em class="slidebardown"><img src="template/default/portal/car/images/bignews_btn_right.gif" /></em>
  12.             </div>
  13.             <div class="bignews_title slideother">
  14.                         [loop2]
  15.                  <em><a href="{url}"{target}>{title}</a></em>
  16.                         [/loop2]
  17.             </div>
  18. </div>
  19. <script type="text/javascript">
  20. runslideshow();
  21. </script>
复制代码

效果十

a10.gif




实现代码

  1. <div class="slidebox">
  2. <div class="bignews">
  3.                 <div class="slideshow">
  4.                         [loop]
  5.                     <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
  6.                         [/loop]
  7.             </div>
  8.         </div>
  9.         <div class="bignewsdesc">
  10.                 <div class="bignewsbtn">
  11.                     <em class="slidebarup"><img src="template/default/portal/home/images/bignews_left.gif" /></em>
  12.                                 <span class="slidebar">
  13.                                         [loop1]
  14.                                         <em>{currentorder}</em>
  15.                                         [/loop1]
  16.                                 </span>
  17.                     <em class="slidebardown"><img src="template/default/portal/home/images/bignews_right.gif" /></em>
  18.             </div>
  19.               <div class="slideother">
  20.                         [loop2]
  21.             <dd >
  22.                 <h2><a href="{url}"{target}>{title}</a></h2>
  23.                 <p><a href="{url}"{target}>{summary}</a></p>
  24.                         </dd>
  25.                         [/loop2]
  26.                </div>
  27.         </div>
  28. </div>
  29. <script type="text/javascript">
  30. runslideshow();
  31. </script>
复制代码

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

百变幻灯 随你而变 

感谢大家


延伸阅读：

全方位立体式讲解DIY技巧集锦
http://www.discuz.net/thread-1909461-1-1.html

百变幻灯片，完全DIY（高级教程）
http://www.discuz.net/thread-1906721-1-1.html

教你如何把切割好的html页面转换成可供DIY的页面（高级教程）
http://www.discuz.net/thread-1908115-1-1.html

全方位立体式讲解DIY技巧集锦第二弹
http://www.discuz.net/thread-1925337-1-1.html

轻松运营（1）Discuz!X 1.5二级域名设置
http://www.discuz.net/thread-1879755-1-1.html

Discuz! X1.5运营宝典（二）妙用频道功能，轻松提升媒体价值
http://www.discuz.net/thread-1865090-1-1.html
joker柒月
关注
专栏目录
最全的PPT高级制作教程
03-02
优秀PPT的定义有很多种，但万变不离其中，制作PPT的终极目标就是要让别人了解你的思想，要想方设法吸引别人的眼球。你可以通过很多方法达到这个目的，比如丰富详实的内容，光彩夺目的模板，精妙绝伦的动画，当然还有演讲者的演说水平和与观众互动等等。以上的几点中，你能够做到2-3点的话，你的PPT就可以称得上是优秀的。但值得注意的是，如果你某一点做的很糟的话，那你的PPT就是失败的，可以说是“一票否决”。所以，请大家注意，一个优秀PPT不一定是每个部分都做到最好，而是每个部分都不搞砸，有几个部分比较突出即可。
ppt高级教程及技巧
03-15
ppt高级教程及技巧 1. 两幅图片同时动作 6 2. 滚动文本框的制作 6 3. 轻松隐藏部分幻灯片 6 4.在PPT演示文稿内复制幻灯片 6 5. Powerpoint自动黑屏 6 6. 将幻灯片发送到word文档 7 7. 让幻灯片自动播放 7 8. 增加PPT的“后悔药” 7 9. PPT中的自动缩略图效果 7 10. 快速灵活改变图片颜色 8 11. 为PPT添加公司LOGO 8 12. “保存”特殊字体 8 .................
PPT高级教程及技巧
热门推荐
chenhaoqiang的专栏
06-21 1万+
PPT高级教程及技巧时间:2010-04-12 http://www.misterlv.com/a/jiagongjishu/2010/0412/7.html1. 两幅图片同时动作 PowerPoint的动画效果比较多，但图片只能一幅一幅地动作。如果你有两幅图片要一左一右或一上一下地向中间同时动作，可就麻烦了。其实办法还是有的，先安置好两幅图片的位置，选中它们，将之组合起来，成为一张图片。
PPT高级教程--快速成为PPT配色高手-高....rar
07-23
PPT高级教程--快速成为PPT配色高手 PPT素材夹V1.0+精美图表PPT素材夹V1.0+精美图表
DIY教程：百变幻灯片制作全攻略
本篇教程详细介绍了如何通过完全DIY的方式创建和自定义百变幻灯片。首先，制作幻灯片的过程涉及登录后台，进入门户模块，通过添加按钮选择所需的模块模板，如文章类，然后为新创建的模块命名，如“百变幻灯片”，并...
百变幻灯片,完全DIY
07-12
【百变幻灯片,完全DIY】的知识点详解 制作百变幻灯片是一个涉及网页设计与前端开发的过程，主要是通过HTML、CSS和JavaScript技术来实现动态效果。在本教程中，我们将学习如何手工创建一个自定义的幻灯片组件。 ...
影梦百变幻灯片简易引导页html5源码源码资源下载整理.zip
最新发布
08-21
【影梦百变幻灯片简易引导页html5源码】是一个专为网页设计者和开发者提供的资源，旨在帮助他们创建吸引人的、具有动态效果的引导页面。这个源码基于HTML5技术，它利用了HTML5的新特性，如语义化标签、离线存储以及...
discuz百变幻灯片特效
01-05
标题中的“discuz百变幻灯片特效”是指在Discuz! 论坛系统中实现的一种动态展示图片或信息的功能，通常被用作首页焦点图或者重要公告的展示方式。Discuz! 是一个非常流行的开源社区论坛软件，它允许管理员自定义界面...
方寸之间,百变百搭——可DIY的AC_DC电源LS-R3系列-论文
05-21
本文将详细介绍如何通过设计创新化解电源产品的七个核心矛盾，并且以金升阳公司推出的LS-R3系列AC/DC电源产品为例，揭示其如何实现可DIY和百变百搭的设计理念。 首先，开关电源中的反激变换器是中小型电子设备中最...
最全的PPT高级制作教程.ppt
07-06
最全的PPT高级制作教程.ppt
discuz diy 幻灯片
11-21
discuz diy 幻灯片。各种幻灯片样式总有一款你想要的！对不会写css的童鞋来说是很好的学习资料。
Slidebar效果
05-05
slidebar效果如连接：http://hi.baidu.com/jsny821/blog/item/d980d14dcb08fe21aec3ab93.html
PPT怎么做的好看?常用的高级技巧分享
scyan_q的博客
11-03 2411
随着PPT的普及，我们对PPT的要求越来越高，现在已经不单单是排版那么简单了。 我们开始在PPT制作中加入设计元素和设计技巧。 比如穿越效果，文字切片、故障效果等，在PPT设计中也越来越常见。 很多PPT设计作品，经常会给人一种感觉：“哇，这居然是用PPT做的?” 那么，在幻灯片设计中，有哪些比较高级的技巧，堪比PS呢? PPT模板素材来源：islide 　　PPT是职场人的必备技能，无论是工作汇报，还是业务分析，你都离不开它。islide小编今天就说下几个让你相见恨晚的技巧，让你的PPT看上去专业又高级
tensorflow.data
liugan528的博客
11-19 181
在数据集框架中，每一个数据集代表一个数据来源：数据可能来自一个张量，一个TFRecord文件，一个文本文件，或者经过sharding的一系列文件等。 由于训练数据通常无法全部写入内存中，从数据集中读取数据时需要使用一个迭代器（iterator）按顺序进行读取 数据集是计算图上的一个节点 import tensorflow as tf # 从数组创建数据集 input_data = [1,2,3,4,5] dataset = tf.data.Dataset.from_tensor_slices(input_
学习Discuz! X3.2记录：又一个幻灯的代码
追
02-23 3217
.bi_ws { float:left; width:450px; height:270px; background-color:#999999; overflow:hidden; }/*幻灯片的整体大小*/ .pi_cx { display:inline; position:relative; float:left; width:337px; height:258px; overflow:hid
Discuz纯DIY -- 【图片整体横向滚动 带左右方向键 for X1.5正式版】[又增加连续滚动]
企业级技术与网站app运营
08-01 2066
有两种样式方法请选择使用： 一、图片整体横移方法： 1、后台门户－模块模板－添加附件模块 2、取名称“图片整体横移” 3、粘贴如下代码：    .panpanluoBox{width:960px;overflow:hidden;padding:5px 5 5px 5px;margin:0 auto;} .panpanluoBox .LeftBotton{height:11
前端学习笔记：关于img图像标签的属性使用
weixin_43339892的博客
08-01 1541
图像标签:<img src=“图片的路径” / > 属性使用不分先后顺序 src=“图片的路径”，src是必须属性 alt=“替换文本，当图像不能正常显示时显示的文字” title=“提示文本，鼠标放到图像上时显示的文字” width=“设置图像的宽度” height=“设置图像的高度” 宽度和高度一般只修改一个就可以了，另外没有设置的宽度或高度属性将会自动等比例改变，这样就不会导致图片失真 border=“设置图像的边框粗细” ...
学习Discuz! X3.2记录：对幻灯播放的进一步修改，包括css，代码
追
02-21 2566
编辑前面的模块模板“DIY幻灯片BY_CBQ”代码为： [loop] {title} [/loop] runslideshow();     修改template\cbqtest\common\extend_common.css中/* 幻灯片 */部分： /* 幻灯片 */ .slideblock { position: relative;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值