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

作者:网络 来源:佚名 更新时间:2008-09-27 点击:

制作循环幻灯片放映效果(动易 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; }

|||

skin/img目录文件:

下载:
  点击下载本文件

更多:使用(动易 div js),制作循环幻灯片放映效果