简约视界

一个php,html,css,javascript的演示

 

[导入]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" onmouseover="change_s(false);" onmouseout="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

posted on 2008-06-04 11:57 马克 阅读(1229) 评论(0)  编辑 收藏 引用 网摘


只有注册用户登录后才能发表评论。
网站导航:

导航

统计

留言簿(1)

随笔分类

随笔档案

文章分类

我的网站

搜索

最新评论

阅读排行榜

评论排行榜