自动更新幻灯 DIV+JS

演示地址 左上幻灯





模板头部加入
<SCRIPT LANGUAGE="JavaScript" src="">images/yeeso/focusImg.js"></SCRIPT>

或者下载提供的JS 在头部加入


CSS表 下面有提供下载

############################################################################
/* 焦点图1 */
#f_div{width:310px; height:250px; overflow:hidden; float:left;position:relative;}
#f_imgDiv{width:310; height:250px; overflow:hidden;filter:progid:DXImageTransform.Microsoft.Fade(Overlap=1.00);}
#f_infoDiv{width:310; top:-24px;}
#f_buttonDiv{width:16px; height:110px; top:68px; right:10px; position:absolute; z-index:2;}/* 按钮区域，定位于infoDiv右侧，注意此div的层级为2，置于半透明层上方 */
#f_buttonDiv .bg{ width:16px; float:left; text-align:center; margin-top:10px;}
#f_buttonDiv .bg a{width:16px;height:16px; float:left; font-size:14px; color:#fff; background:#000; filter:Alpha(Opacity=60); line-height:16px; overflow:hidden;text-decoration:none;}/* 按钮定义 */
#f_buttonDiv .bg a:link,#f_buttonDiv a:visited,#f_buttonDiv a:active{}/* 初始按钮效果 */
#f_buttonDiv .bg a:hover{background:#2b79cb; color:#fff; filter:Alpha(Opacity=100);}/* 初始按钮鼠标经过效果 */
#f_buttonDiv .bg a.on:link,#f_buttonDiv a.on:visited,#f_buttonDiv a.on:active,#f_buttonDiv a.on:hover{background:#2b79cb; color:#fff; filter:Alpha(Opacity=100);}
#f_textbg {width:310px; height:24px; float:left;background:#000; filter:Alpha(Opacity=50); top:226px; left:0;position:absolute; z-index:2;}
#f_text{width:310px;height:24px; line-height:24px; overflow:hidden;text-align:center; float:left; top:226px; left:0;position:absolute; z-index:3;}
#f_text a:link,#f_text a:visited,#f_text a:active{color:#fff;text-decoration: none;filter:Alpha(Opacity=100);}
#f_text a:hover{color:#ddd;text-decoration: none;}
############################################################################


幻灯部分代码 加入到INDEX.HTM

##################################################
<div id="f_div">
<div id="f_imgDiv">$label[pic1]</div>
<div id="f_infoDiv">
<div id="f_textbg"></div>
<div class="f14" id="f_text">$label[pic2]

</div></div>
<div id="f_buttonDiv">

<div class="bg"><a class="" href="javascript:void(0)" normalclass="" focusclass="on">1</a></div>
<div class="bg"><a class="on" href="javascript:void(0)" normalclass="" focusclass="on">2</a></div>
<div class="bg"><a class="" href="javascript:void(0)" normalclass="" focusclass="on">3</a></div>
<div class="bg"><a class="" href="javascript:void(0)" normalclass="" focusclass="on">4</a></div>
<div class="bg"><a class="" href="javascript:void(0)" normalclass="" focusclass="on">5</a></div>
<div class="bg"><a class="" href="javascript:void(0)" normalclass="" focusclass="on">6</a></div></div></div>


<script>   
var a=new PicFocus("f_imgDiv","f_text","f_buttonDiv");
a.init();
a.play();
</script>

###########################################################################

大小在CSS中定义 根据想要的大小修改

###########################################################################
标签设置代码
###########################################################################

pic1的标签设置代码 6行1列

###########################################################################
<A title="$full_title"
href="$url"
target=_blank><IMG height=250 src="$picurl"
width=310></A>
###########################################################################
PIC2的设置代码  懂代码可以看出来<a hre=$picurl"></A> 这是个空连接 为什么加这个？ 因为上面的标签为图片
如果下面不调用会有 图片不对标题的状态出现 当然这2个标签设置的显示模式一定要一样

比如 PIC1为最新发布 PIC2也要这样设置
###########################################################################
<LABEL><A title="$full_title"
href="$url"
target=_blank>$title</A><a hre=$picurl"></A></LABEL>