[导入]CSS+JS实现的幻灯片效果

CSS代码如下：

程序代码

/* 轮播图片 */
#oo_img {}
#oo_img a{display:none;}
#oo_img a.imgdefault{display:none;}
#oo_img a.imgthis{display:block;}
#oo_img img {width:350px; height:250px;}
#oo_num {padding:3px 0 0 6px; clear:both; margin-top:-21px; float:right}
#oo_num a {float:left; text-align:center; line-height:18px; display:block; width:28px; height:18px;border-right:1px solid #fff; background:#999; font-weight:bold;}
#oo_num a:link{color:#fff;}
#oo_num a:visited{color:#fff;}
#oo_num a:hover{color:#fff;}
#oo_num a:active{color:#fff;}
#oo_num a.linkdefault {background:#999;width:28px;height:18px;}
#oo_num a.linkthis:link {background:#F60;width:28px;height:18px;color:#FFF;}
#oo_num a.linkthis:visited {background:#F60;width:28px;height:18px;color:#FFF;}

首页调用代码如下：

程序代码

<div id="oo_img" >
   {dede:arclist att='3' row='5' titlelen='24' orderby='pubdate' function='FormatScript(@me)'}
   <a href="[field:arcurl/]" target="_blank" name="oo_img_name" οnmοuseοver="change_s(false);" οnmοuseοut="change_s(true);"><img src="[field:picname/]" alt="[field:title/]" /></a>
   {/dede:arclist}
</div>
<div id="oo_num">
   <a href="javascript:change_j(1);" name="oo_link_name" target="_self">1</a>
   <a href="javascript:change_j(2);" name="oo_link_name" target="_self">2</a>
   <a href="javascript:change_j(3);" name="oo_link_name" target="_self">3</a>
   <a href="javascript:change_j(4);" name="oo_link_name" target="_self">4</a>
   <a href="javascript:change_j(5);" name="oo_link_name" target="_self">5</a>
</div>
<script type="text/javascript">
<!--
var oo_img_name=document.getElementsByName("oo_img_name");
oo_img_name[0].className="imgthis";
var oo_link_name=document.getElementsByName("oo_link_name");
oo_link_name[0].className="linkthis";

var i=oo_img_name.length;
var j=0;
var s=true;
change_img();
function change_s(ss){s=ss;}
function change_j(ii){
   j=ii-1;
   oo_setFocus(ii-1);}
function change_img(){
   if(j>=i) j=0;
   if(j<i&s==true) oo_setFocus(j++);
   setTimeout("change_img()",3000);}
function oo_setFocus(ii)
{
   for(var tmp=0;tmp<i;tmp++) {
   oo_img_name[tmp].className="imgdefault";
   oo_link_name[tmp].className="linkdefault";
   }
   oo_img_name[ii].className="imgthis";
   oo_link_name[ii].className="linkthis";
}
-->
</script>

文章来源: http://www.windsfly.cn/blog/default.asp?id=755

马克 2008-06-04 11:57 发表评论

转载于:https://www.cnblogs.com/ivwsai/archive/2008/06/04/1222195.html