輕量級網頁圖片滾動展示jquery外掛FlexSlider(附下載)
阿新 • • 發佈:2019-02-02
由於初學網頁程式設計,接了一個專案需要首頁進行圖片滾動,於是找了這個外掛,剛開始根據flexslider推薦的官方配置使用了一下,圖片一直顯示不出來。經過一番折騰,終於可以了,使用教程以及flexslider下載如下。
首先在html首部宣告flexslider所需要的包,flexsider完整外掛可以在我的網盤裡面下載,網盤地址:http://pan.baidu.com/s/1qWrxm1Y,
<link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jquery.min.js"></script> <script src="jquery.flexslider.js"></script>
另外需要在專案中匯入flexslider的fonts資料夾,裡面包含了該外掛的圖示檔案,如左右翻頁圖示
然後用js載入這個外掛,其中.flexslider必須和所要顯示的div的class名相同,裡面有一些屬性如animation等這裡不做詳細解釋,大家意會即可。
<script type="text/javascript" charset="utf-8"> $(window).load(function() { $(.flexslider).flexslider({ animation : "fade", controlsContainer : ".flex-container", controlNav : false, slideshowSpeed : 5000 }); }); </script>
以下是body內的圖片滾動展示區域
<div class="<span style="color:#ff0000;">flexslider</span>"> <span style="white-space:pre"> </span><ul class="slides"> <span style="white-space:pre"> </span><li><img src="images/1.jpg" /></li> <span style="white-space:pre"> </span><li><img src="images/2.jpg" /></li> </ul> </div>
貼出一張效果圖