說名:利用 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 |