用户登陆|用户注册|建站服务|广告合作
您现在的位置: 首页 >> 建站实务 >> 程序应用 >> 使用技巧 >> 正文
站内搜索:
使用(动易+DIV+JS),制作循环幻灯片放映效果
[作者:赛酷网收集整理|来源:互联网|时间:2006-10-10| 收藏 投稿 ]【

制作循环幻灯片放映效果(动易+DIV+JS):

模板代码:

模板代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{$PageTitle}</title>
{$Meta_Keywords}
{$Meta_Description}
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="{$InstallDir}JS/prototype.js"></script>
<script src="{$InstallDir}JS/scriptaculous.js"></script>
<script src="{$InstallDir}JS/checklogin.js"></script>
{$Skin_CSS}
{$MenuJS}
</head>
<body>

 

<DIV id="main_left">
<script language="JavaScript" type="text/javascript">
var tID=0;
var nn;
nn=0;
setTimeout("change_img()",4000);
function change_img()
{
if(nn>4) nn=0
setTimeout("ShowTabs("+nn+")",4000);
nn++;
tt=setTimeout("change_img()",4000);
}

function ShowTabs(ID){
var Tabss=document.getElementsByName("Tabs");
Tabs[tID].style.display="none";
Tabs[ID].style.display="block";
menus.className="num bg"+ID;
tID=ID;
}
</script>
【ArticleList(0,0,false,SpecialID,5,false,false,,0,1,True,30,0)】
<DIV class=focusPic id=Tabs style="DISPLAY:none">
<DIV><A href="{$ArticleUrl}">{$ArticlePic(224,130)}</A></DIV>
<DIV id="box_tit"><A href="{$ArticleUrl}">{$Title}</A></DIV>
</DIV>
【/ArticleList】
<DIV class=focusPic>
<DIV class=textNum>
<DIV class="num bg0" id="menus">
<UL>
<div ID="put_li"><A href="javascript:ShowTabs(0);" target=_self>1</A></div>
<div ID="put_li"><A href="javascript:ShowTabs(1);" target=_self>2</A></div>
<div ID="put_li"><A href="javascript:ShowTabs(2);" target=_self>3</A></div>
<div ID="put_li"><A href="javascript:ShowTabs(3);" target=_self>4</A></div>
<div ID="put_li"><A href="javascript:ShowTabs(4);" target=_self>5</A></div>
</UL>
</DIV>
</DIV>
</DIV>
<script language="JavaScript" type="text/javascript">
ShowTabs(0);
</script>

</DIV>
</body>
</html>

CSS代码:

CSS代码:

#main_left{width:248px;float:left;}

UL {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
#box_tit{text-align:center;margin-left:auto;margin-right:auto;background:#e8e8e8;}
#box_tit a{text-decoration:none;color:#790292;margin-top:4px;}
#box_tit a:hover{color:#A00;}
.focusPic {BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 224px;font-size:12px;margin-left:auto;margin-right:auto;}
.textNum {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px}
.textNum .num {FLOAT: right; OVERFLOW: hidden; WIDTH: 140px; HEIGHT: 18px}
.textNum .bg0 {BACKGROUND: url(Skin/img/num1.gif)}
.textNum .bg1 {BACKGROUND: url(Skin/img/num2.gif)}
.textNum .bg2 {BACKGROUND: url(Skin/img/num3.gif)}
.textNum .bg3 {BACKGROUND: url(Skin/img/num4.gif)}
.textNum .bg4 {BACKGROUND: url(Skin/img/num5.gif)}
.textNum UL {FLOAT: left; WIDTH: 140px;text-align:center;}
#put_li {display:block; }
#put_li A {text-decoration:none;display:block;FONT-WEIGHT: bold; FLOAT: left; WIDTH: 25px; margin-right:0px; COLOR: #fff;text-align:center; margin:5px 3px 0px 0px;}
#put_li A:hover {COLOR: #ff0; }

skin/img目录文件:

下载:
  skin/img目录文件.rar


Tags:
最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
快速注册通道
赛酷网·中国西部第一建站门户
关于我们 | 投稿指南 | 广告服务 | 建站服务 | 联系我们 | 网站地图 | 友情连接 | 诚征英才
地址:中国·昆明盘龙区丽水天锦A栋15楼A06 服务热线:0871-5610002 5732371联系我55693344 联系我80796509
建站交流群:17577271 下载交流群:11885804 22003060 35468519 交流论坛
© CopyRight 2005-2007, Syku.Net, Inc. All Rights Reserved
赛酷网络版权所有 滇ICP备05000398号