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

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

哈哈，你很喜欢吧？ 必须的我要告诉你，这个是我花了不少工作搞出来的，因为用到了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>


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

补充说明：  
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 谢谢

多谢楼主慷慨分享

自己支持一个！！！

不错的说！喜欢！

为什么用不了呢？帮看下，图片

论坛首页怎么才可以显示正常

29698826 发表于 2012-12-21 16:14
论坛首页怎么才可以显示正常

自己看一下CSS，对CSS做出修改

CSS 规则写上  overflow：hidden;

好想要啊，就是看起来很麻烦，我想DIY到原版风格中可以么？