说名:利用 jquery的插件YLMarquee实现图片滚动
ps: YLMarquee 是彦磊基于 jQuery 制作的一款图片、文字平滑无间断滚动插件,该插件可以轻松实现图片或文字向左或向右滚动,可设定可见元素个数及容器的宽度、高度。YLMarquee CPU 占用率极低,兼容 IE6、IE7、IE8、火狐、谷歌等众多浏览器。
第一步:
1.引入插件
<script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/YLMarquess.js"></script>
2.设置一个div容器
<div id="slider-footer">
<ul>
<c:forEach items="${parnters}" var="item" varStatus="va">
<li>
<a target="_blank" href="${item.partnerUrl}" ><img
src="${item.partnerImgurl}" width="270"
></a>
</li>
</c:forEach>
</ul>
</div>
3.js里引用插件
$("#slider-footer").YlMarquee({
visible : 1,//页面可见元素(图片)个数,
width:"1100"
});
4.设置css样式
#slider-footer {
margin: 30px 0;
height:70px;
overflow:hidden;
}
#slider-footer ul li {
margin: 0 10px;
}
5,可参见其他例子
http://www.dowebok.com/10.html
6.附:
YLMarquee的一些相关参数,转自(http://www.dowebok.com/10.html):
参数 | 说明 |
---|---|
visible | 页面可见元素(图片)个数,默认为 3,必须参数 |
step | 滚动速度,整数,默认为 3,数值越大滚动速度越快;若为 0,则不滚动 |
vertical | 滚动方向,有”true”(向上滚动)和”false”(向左滚动)两个参数,默认为 false |
width | 容器的宽度,不指定则由插件自动计算并覆盖 CSS 样式中的宽度(建议设置为 CSS 的宽度) |
height | 容器的宽度,不指定则由插件自动计算并覆盖 CSS 样式中的高度(建议设置为 CSS 的高度) |
textMode | 文字模式(默认为图片模式),当滚动内容为文字时,请指定为 true |