织梦CMS默认的图片滚动代码

来源:互联网  时间:2017-11-25    阅读:   我要吐槽    阿里云幸运券

需要的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定义宽度。

参与讨论