需要的JS文件,织梦默认的图片滚动需要2个JS文件,一个是CMS目录下images/js/j.js 另一个是模板目录下js/pic_scroll.js
<script language="JavaScript" type="text/javascript" src="{dede:global.cfg_cmspath/}/images/js/j.js" ></script> <script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/pic_scroll.js"></script>
必须的HTML代码
<div class="infiniteCarousel"> <div class="wrapper"> <ul id="imgscroll"> {dede:arclist row=10 orderby=pubdate type="image." imgwidth="143" imgheight="106"} <li><a href="[field:arcurl/]">[field:image/]<span class="title">[field:title/]</span></a></li> {/dede:arclist} </ul> </div> </div>
以上是织梦默认的图片滚动必要的代码,一个都不能少!其中类选择器infiniteCarousel控制滚动框的大小,在网页中它的子元素会多出2行代码,分别代表向左滚动和向右滚动。
<a class="arrow back" href="#"><</a> <a class="arrow forward" href="#">></a>
必须的CSS代码
.infiniteCarousel{ width:600px; height:200px; border:3px solid #999; } .infiniteCarousel .wrapper{ width:600px; } li{ float:left; }
外框必须是固定宽度,列表必须是浮动,浮动列表之间用padding值,不要使用margin值,否则不容易对齐。需要注意的是在IE6中内容会自动把外框撑大,所以还要给.wrapper定义宽度。