jquery插件實現圖片滾動

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




 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章