Discuz教程网

1314学习网»站长论坛 › discuz资源中心 › discuz开发资料 › 自定义diy幻灯片展示方式
返回列表 发新帖

[模板制作] 自定义diy幻灯片展示方式

  [复制链接]
authicon dly 发表于 2012-8-17 17:24:50 | 显示全部楼层 |阅读模式
幻灯各项css属性
文件：template/default/common/common.css
以下代码就是控制全局幻灯的，下面进行介绍
  1. /* 幻灯片 */
  2. .slideblock { position: relative; }
  3. .slideshow { clear: both; }
  4. .slideshow li { position: relative; overflow: hidden; }
  5. .slideshow span.title { position: absolute; bottom: 0; left: 0; margin-bottom: 0; width: 100%; height: 32px; line-height: 32px; font-size: 14px; text-indent: 10px; }
  6. .slideshow span.title, .slidebar li { background: rgba(0, 0, 0, 0.3); filter:progid<IMG alt=:D src="http://www.dnwxz.com/static/image/smiley/default/biggrin.gif" border=0 smilieid="3">XImageTransform.Microsoft.gradient(startColorstr = #30000000, endColorstr = #30000000); color: {LIGHTLINK}; overflow: hidden; }
  7. .slidebar li { float: left; margin-right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; cursor: pointer; }
  8. .slidebar li.on { background: rgba(255, 255, 255, 0.5); filter:progid<IMG alt=:D src="http://www.dnwxz.com/static/image/smiley/default/biggrin.gif" border=0 smilieid="3">XImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF, endColorstr = #50FFFFFF); color: #000; font-weight: 700; }
复制代码
/* 幻灯片 */
.slideshow { clear: both; }    * 幻灯片一级框架强制换行 */
.slideshow li { position: relative; overflow: hidden; }     /* 幻灯片二级框架相对定位，溢出内容不显示 */

.slideshow span.title { position: absolute; bottom: 0; left: 0; margin-bottom: 0; width: 100%; height: 32px; background: {FLOATMASKBGCOLOR}; color: {LIGHTLINK} !important; line-height: 32px; font-size: 14px; text-indent: 10px; opacity: 0.5;
filter: alpha(opacity=50); overflow: hidden; }         /* 幻灯片标题，相对于父框架.slideshow li进行绝对 定位，left、right、top、bottom为相对定位的元素，背景、强制颜色、行高、字体大小、首行缩进值及兼容透明度   */

.slidebar li { float: left; margin-right: 1px; width: 20px; height: 20px; background: {FLOATMASKBGCOLOR}; line-height: 20px; text-align: center; font-size: 10px; color: {LIGHTLINK}; overflow: hidden; opacity: 0.5; filter: alpha(opacity=50); cursor: pointer;
}     /*  幻类顶部序号：浮动、右边距、宽度、高度、背景、行高、对齐方式、字体大小、颜色、溢出内容不显示、兼容透明度值及鼠标形状    */

.slidebar li.on { background: {WRAPBG}; color: #000; font-weight: 700; opacity: 0.8; filter: alpha(opacity=80); }     /*  当前序列号样式：背景、颜色、加粗程度及兼容透明度   */

官方默认的幻灯幻灯片展示样式，也许你想换换样子了。呵呵，下面我就给大家分享下如何自定义自己的diy幻灯模块。

一、首先我们在代码框里面输入
  1. <div class="slidebox"></div>
复制代码

其中的div可以是任意标签，如table，span等，我们这里以div为例
此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记

二、接下来，我们增加幻灯代码   属性为class="slideshow"的标签用来实现图片（或内容）的显示作用
含class="slideshow"标签的代码必须放在 class="slidebox"的属性的标签里面
此时代码如下：
  1. <div class="slidebox">
  2. <div class="slideshow"></div>
  3. <div>
复制代码

三、接下来我们来增加“滑动”、“点击”的代码<div class="slidebar"></div>
此代码也必须放在 class="slidebox"的属性的标签里面
此时加上内容与滑动、点击的完整代码如下：
  1. div class="slidebox"><!--幻灯片开始-->
  2. <div class="slideshow"> </div><!--图片展示-->
  3. <div class="slidebar"> </div><!--幻灯片控制展示-->
  4. </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 align=left><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><!--幻灯片结束--></DIV>
  12. <DIV align=left><script type="text/javascript">
  13. runslideshow();
  14. </script>
  15. </DIV>
复制代码

下面是官方默认的展示样式：
<div class="module cl slidebox">
<ul class="slideshow">
[loop]
<li style="width: {picwidth}px; height: {picheight}px;"><a href="{threadurl}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{threadsubject}</span></li>
[/loop]
</ul>
</div>
<script type="text/javascript">
runslideshow();
</script>


<li style="width: {picwidth}px;height: {picheight}px;"><ahref="{threadurl}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}"/></a><span class="title">{threadsubject}</span></li>
其中，<span class="title">{threadsubject}</span>是底部的半透明标题文字。
如果说你没有定义图片轮换展示的代码的话，<script type="text/javascript">
runslideshow();
</script>
这段代码会自动生成一个图片轮换展示的切换内容，即当前半透明的数字标识列。


下面讲解一些高级参数

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

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

    添加如下代码即可实现
  1. <div class="slidebarup">
  2. <span>up</span>
  3. </div>
  4. <div class="slidebardown">
  5. <span>down</span>
  6. </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>
  4. <div class="slideother">
  5. <span>内容二</span>
  6. </div>
复制代码

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


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

0710296dds5zcluib15xh5.gif

         在<div class="slidebox" >增加参数  如下代码
  1. <div class="slidebox" slidenum="3" slidestep="1">
复制代码

其中  slidenum="3"  表示显示数量  ， slidestep="1" 表示每点击一次左右按扭 移动的次数
以上为幻灯片的所有功能
下面提供演示站点中门户及频道所用到的幻灯片代码 （大家可以参照所提供的代码制作出炫丽的幻灯片）

以下所示效果都需要CSS配合
效果一
071031osiubdjdcseejusz.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>
复制代码

效果二

071032555239vpw8ey4pjn.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>
复制代码

效果三

071032gj4rjh4or3d84too.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>
复制代码

效果四
071033zxxpxapyihp5obhg.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>
复制代码

效果五

071036j995c9lb8alhhjyj.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>
复制代码

效果六
071038ua92ayusyg9ywu3u.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>
复制代码

效果七

0710390a3elu0nspssgpv0.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>
复制代码


效果八

0710410zs0woz3iiit99ku.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>
复制代码

效果九
07104301jkkpvz78x9vkvz.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>
复制代码


效果十
071046vbeurqll6blz3ef3.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>
复制代码

游客，如果您要查看本帖隐藏内容请回复
seo



上一篇：新浪微博登陆提示出错
下一篇：Discuz X 完整备份论坛数据到本地的全过程

相关帖子
回复

举报

authicon 中国营销沙龙 发表于 2012-8-17 22:44:29 | 显示全部楼层
这个真是很好的！
回复

举报

authicon hemraz 发表于 2012-8-31 14:23:56 | 显示全部楼层
很强大！！！
回复

举报

authicon Mad_World 发表于 2012-10-9 14:07:11 | 显示全部楼层
这个很好
学习了
谢
回复

举报

authicon 城市猎人 发表于 2012-10-27 23:16:15 | 显示全部楼层
楼下的听好了……我只是路过打酱油的。
回复

举报

authicon ZXY280 发表于 2013-1-16 22:50:33 | 显示全部楼层
还隐藏什么呢
回复

举报

authicon Chisame 发表于 2013-1-22 00:28:25 | 显示全部楼层
强烈支持楼主ing……楼下的听好了……
回复

举报

authicon soulame 发表于 2013-8-27 12:28:36 | 显示全部楼层
这个很厉害？
回复

举报

authicon 天晴很好 发表于 2013-9-30 10:25:19 | 显示全部楼层
搞起，吼吼~~很不错的东西哦~~
回复

举报

authicon 网络摆渡客 发表于 2013-11-12 21:30:28 | 显示全部楼层
谢谢楼主分享
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2024-5-20 01:44

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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