Discuz! 官方站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 84197|回复: 38

DIY 带焦点图的幻灯片 【二】

[复制链接]
发表于 2012-12-18 12:22:02 | 显示全部楼层 |阅读模式
DIY模块素材
模块类型: 论坛类
展示风格: 幻灯轮播
是否原创:
本帖最后由 oyanan 于 2013-5-21 21:40 编辑

先来贴上一张图吧  [补充说明,看二楼]

哈哈,你很喜欢吧? 必须的我要告诉你,这个是我花了不少工作搞出来的,因为用到了jQuery ,会与默认JS起冲突,所以我也结局了一下默认的冲突问题,CSS写了半天啊,今天分享给大家了!

切换效果很不错的

门户模块代码:


--------------HTML----------------------------------------------
<div class="picBtnLeft">
<div class="bd">
        <ul>
        [loop1]
                <li>
                        <div class="bg"></div>
                        <div class="pic"><a href="{url}"><img src="{pic}" /></a></div>
                        <div class="title"><a href="{url}">{title}</a></div>
                </li>
        [/loop1]
        </ul>
</div>
  <div class="hd">
        <ul>
                [loop]
                        <li><img src="{pic}" /></li>
                [/loop]
        </ul>
</div>
</div>

CSS代码:
--------------CSS-----------------------------------------------

.picBtnLeft{ width:290px; height:250px; padding:10px;  overflow:hidden;  zoom:1;}
.picBtnLeft .hd{ width:290px;  height:50px; }
.picBtnLeft .hd ul{ width:293px;  overflow:hidden; zoom:1; }
.picBtnLeft .hd ul li{ padding-top:4px; float:left; _display:inline; text-align:center;  }
.picBtnLeft .hd ul li img{ width:64px; height:40px; border:3px solid #333; cursor:pointer; margin-right:3px;}
.picBtnLeft .hd ul li.on img{ border-color:#089;  }

.picBtnLeft .bd{ width:290px;  height:200px; position:relative; }
.picBtnLeft .bd img{ width:290px; height:200px;  }
.picBtnLeft .bd li{ position:relative; zoom:1; }
.picBtnLeft .bd li .pic{ position:relative; z-index:0; line-height:0px;  }
.picBtnLeft .bd li .bg{ display:block;  width:290px; height:30px; position:absolute; left:0; bottom:0; z-index:1;  background:#000; filter:alpha(opacity=60);opacity:0.6;    }
.picBtnLeft .bd li .title{ display:block;  width:290px; height:30px; line-height:30px; left:0; bottom:0;   position:absolute; z-index:2;  }
.picBtnLeft .bd li .title a{ color:#fff;  }

jQuery代码:
--------------JS---------------------------

1.首先需要下载jquery库,如果你的模板已经有了,那就不需要了,如果没有,在这里下载并引入

www.jquery.com

2.切换核心JS 也需要引入  (已经解决冲突问题了)



3.在引用这个焦点图的页面插入这段JS就好了


<script type="text/javascript">jQuery(".picBtnLeft").slide({ mainCell:".bd ul",effect:"fade",autoPlay:true });</script>


不会的请看下面的方法 详细讲解一下!!!







本帖子中包含更多资源

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

x
 楼主| 发表于 2012-12-18 12:33:43 | 显示全部楼层
本帖最后由 oyanan 于 2013-5-21 21:58 编辑

补充说明:  
1.CSS大家可以根据需求自己修改,要说的就是 因为这个是带缩略图的,所以图片的大小由CSS控制

2.新建模块模板的方法:后台-门户-模块模板-添加

3. 3个JS都需要引入,如果你不会,后面更贴我来帮你!

JS引入说明:

1.首先您需要下载jQuery 和我提供的 jquery.superslide.js

2.在你网站根目录下新建一个myjs文件夹

3.如果你是在首页引入 JS  可以在模板(index.html)的最末尾加上这三句

<script type="text/javascript" src="myjs/jquery.js"></script>

<script type="text/javascript" src="myjs/jquery.super.slide.js"></script>
<script type="text/javascript">jQuery(".picBtnLeft").slide({ mainCell:".bd ul",effect:"fade",autoPlay:true });</script>


AD网站模板定价位定制 QQ 405621584 如果是关于不会用这个的问题请回帖 勿要加我QQ 谢谢


回复

使用道具 举报

发表于 2012-12-18 16:25:19 | 显示全部楼层
多谢楼主慷慨分享
回复

使用道具 举报

 楼主| 发表于 2012-12-18 18:37:56 | 显示全部楼层
自己支持一个!!!
回复

使用道具 举报

发表于 2012-12-18 21:27:32 | 显示全部楼层
不错的说!喜欢!
回复

使用道具 举报

发表于 2012-12-21 13:57:52 | 显示全部楼层
本帖最后由 29698826 于 2012-12-21 13:59 编辑

为什么用不了呢?帮看下,图片

本帖子中包含更多资源

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

x
回复

使用道具 举报

发表于 2012-12-21 16:14:49 | 显示全部楼层
论坛首页怎么才可以显示正常
回复

使用道具 举报

 楼主| 发表于 2012-12-23 18:36:54 | 显示全部楼层
29698826 发表于 2012-12-21 16:14
论坛首页怎么才可以显示正常

自己看一下CSS,对CSS做出修改
回复

使用道具 举报

 楼主| 发表于 2013-1-4 20:12:45 | 显示全部楼层
CSS 规则写上  overflow:hidden;
回复

使用道具 举报

发表于 2013-1-13 00:30:18 来自手机 | 显示全部楼层
好想要啊,就是看起来很麻烦,我想DIY到原版风格中可以么?
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2019-8-24 19:57

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

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