制作循环幻灯片放映效果如何用于显示商品??-动易CMS教程

来源:模板无忧 作者:佚名 更新时间:2007-09-26 点击:

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

模板代码:

{$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>
【ProductList(0,true,0,4,0,false,false,0,1,True,20,0)】
<DIV class=focusPic id=Tabs style=\"DISPLAY:none\">
<DIV><A href=\"{$ProductUrl}\">{$ProductThumb(224,130)}</A></DIV>
<DIV id=\"box_tit\"><A href=\"{$ProductUrl}\">{$ProductName}</A></DIV>
</DIV>
【/ProductList】

<DIV class=focusPic>
<DIV class=textNum>
<DIV class=\"num bg0\" id=\"menus\">
<UL>
<div ID=\"put_li\"><A href=\"nojavascript...ShowTabs(0);\" target=_self>1</A></div>
<div ID=\"put_li\"><A href=\"nojavascript...ShowTabs(1);\" target=_self>2</A></div>
<div ID=\"put_li\"><A href=\"nojavascript...ShowTabs(2);\" target=_self>3</A></div>
<div ID=\"put_li\"><A href=\"nojavascript...ShowTabs(3);\" target=_self>4</A></div>
<div ID=\"put_li\"><A href=\"nojavascript...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; }

< Prev12 Next >
相关动易CMS教程:
最新评论:
loading.. 评论加载中....
发表评论:不能超过250字节,请自觉遵守互联网相关政策法规.
  • 昵称: 验证: