Discuz! 官方站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 88745|回复: 60

diy纯幻灯效果,不需导入js

[复制链接]
发表于 2014-3-16 21:16:25 | 显示全部楼层 |阅读模式
DIY模块素材
模块类型: 展示类
展示风格: 幻灯轮播
是否原创:
本帖最后由 coolmuzi 于 2014-5-8 16:28 编辑

最近研究了本站的一些关于幻灯的帖子,颇有心得,修正了一些错误,经过我测试,完美运行,共整理了五种效果。本想设置回复帖子才能浏览本帖内容,却怎么也找不到选项,先放一个吧。其他的以后再放。
先看图:

本站也有一个是这样的效果,地址:http://www.discuz.net/forum.php?mod=viewthread&tid=3180420,可以还要导入js,挺麻烦的,就搞了这么一个纯diy的,注意在diy设置的时候,需要设置幻灯的宽度为350px,高度330px。

以下是代码:
  1. <style>
  2. .bi_ws { float:left; width:350px; height:330px; background-color:#999999; overflow:hidden; }/*幻灯片的整体大小*/
  3. .pi_cx { display:inline; position:relative; float:left; width:337px; height:258px; overflow:hidden; margin:6px 0 3px 6px; }/*大图片区域样式*/
  4. .pi_cx div img { width:337px; height:258px; }/*大图片的大小*/
  5. .bi_ws_op { margin-left: 8px;  position:absolute; left:5; bottom:0px; width:322px; height:70px; color:#FFF;  }/*字幕区定义*/
  6. .bi_ws_opdiv { position:absolute; left:0; bottom:0px; width:337px; height:78px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }/*标题区背景 透明度50%*/
  7. .bi_ws_op h2 a{ font-size: 18px; color:#FFF; font-weight: bolder; }/*文章标题样式*/
  8. .bi_ws_op h2 a:hover { text-decoration:underline; color:#FF9300; }/*文章标题鼠标经过样式*/
  9. .bi_ws_btn { width:344px; height:60px; float:left;margin-left:6px; }/*下侧缩略图区域样式*/
  10. .bi_ws_btn div { float:left; width:86px; height:60px; cursor:pointer;  margin:1px 0px 1px 0px ; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=70); }/*下侧缩略图区域中每个缩略图区域样式*/
  11. .bi_ws_btn img { width:80px; height:54px; margin:0px; border:1px solid #ffffff; }/*缩略图样式(非焦点缩略图)*/
  12. .bi_ws .bi_ws_btn .on{ background:url(/forum/static/image/common/1-1.png) no-repeat 0 0; width:86px; height:60px;  opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }/*焦点缩略图样式*/

  13. </style>
  14. <div class=" bi_ws slidebox">
  15.     <div class="pi_cx slideshow">
  16.     [loop]
  17.       <div>
  18.        <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
  19.        <div class="bi_ws_opdiv"></div>
  20.        <div class="bi_ws_op">
  21.          <ul>
  22.           <li>
  23.            <h2><a href="{url}"{target}>{title}</a></h2>
  24.            <p><span style="font-size: 12px">{summary}</span></p>
  25.           </li>
  26.          </ul>
  27.        </div>
  28.       </div>
  29.     [/loop]
  30.     </div>
  31.     <div class="bi_ws_btn slidebar" mevent="mouseover" >
  32.     [loop1]
  33.        <div><img src="{pic}" /></div>
  34.     [/loop1]
  35.     </div>
  36. <script type="text/javascript">runslideshow();</script>
  37. </div>
复制代码

其他的四种效果:(麻烦知道设置回帖可见的朋友给我说如何操作,我用hide标签不管用啊。这样我好把其他的四种幻灯的代码放出来。)
1、右侧缩略图幻灯,带缩略图和标题、摘要:

2、简洁的幻灯,带标题

3、大图片幻灯,带缩略图和标题

4、九宫格幻灯,大图片展示

以上都是纯diy的,不用导入js代码,不用担心冲突的问题。

////////////////////////////////////////////////////////////////////
有的坛友想要代码,我这里把五种效果的代码放在了一个文本文件里,大家下载下来,自己研究吧。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

评分

1

查看全部评分

发表于 2014-3-20 18:50:30 | 显示全部楼层
此帖仅作者可见

使用道具 举报

发表于 2014-3-21 17:53:31 | 显示全部楼层
此帖仅作者可见

使用道具 举报

发表于 2014-3-22 12:06:14 | 显示全部楼层
此帖仅作者可见

使用道具 举报

 楼主| 发表于 2014-3-22 22:18:46 | 显示全部楼层
此帖仅作者可见

使用道具 举报

发表于 2014-3-30 19:35:19 | 显示全部楼层
此帖仅作者可见

使用道具 举报

发表于 2014-3-30 22:28:24 | 显示全部楼层
此帖仅作者可见

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|Comsenz ( 粤B2-20090059-165 )star

GMT+8, 2019-8-18 08:47

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

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