輪播圖-bxslider

bxSlider下載+參數說明

「bxSlider」就是一款響應式的幻燈片js插件

bxSlider特性

充分響應各類設備，適應各類屏幕；

支持多種滑動模式，水平、垂直以及淡入淡出效果；

支持圖片、視頻以及任意html內容；

支持觸摸滑動；

支持Firefox，Chrome，Safari，iOS，Android，IE7+

bxSlider使用方法：

加載jQuery庫，加載bxSlider插件文件和相關CSS文件；

    <!-- bxSlider CSS file -->
    <link href="jquery.bxslider.css" rel="stylesheet" />
    
    <!-- jQuery library -->
    <script src="jquery-3.1.1.min.js"></script>
    <!-- bxSlider Javascript file -->
    <script src="jquery.bxslider.js"></script>

View Code

 

建立一個幻燈片區塊：

    <ul class="bxslider">
      <li><img src="images/pic1.jpg" /></li>
      <li><img src="images/pic2.jpg" /></li>
      <li><img src="images/pic3.jpg" /></li>
      <li><img src="images/pic1.jpg" /></li>
      <li><img src="images/pic2.jpg" /></li>
    </ul>

 

加上bxSlider參數激活使用：

    <script>
        $(document).ready(function() {
            $('.bxslider').bxSlider({
                mode: 'horizontal',
                moveSlides: 1,
                slideMargin: 40,
                infiniteLoop: true,
                slideWidth: 660,
                minSlides: 3,
                maxSlides: 3,
                speed: 800,
            });
        });
    </script>

View Code

 

bxSlider下載地址：官方下載

bxSlider下載地址：github下載

bxSlider具體參數：

參數	描述	默認值
mode	設置滑動模式，'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出	horizontal
speed	內容切換速度，數字，ms	500
startSlide	初始滑動位置，數字	0
randomStart	隨機初始滑動位置	true
infiniteLoop	循環滑動，若是設置爲true時，則到最後滑動位置時會切換到初始位置	true
easing	切換動畫擴展，能夠藉助jQuery Easing 動畫效果擴展設置不一樣的切換動畫效果	null
captions	設置顯示圖片標題，當滑動內容爲圖片時並設置屬性title，能夠顯示圖片標題	false
video	支持視頻，當設置爲true時，須要jquery.fitvids.js支持	false
pager	設置是否顯示分頁，設置爲true時，會在滑動內容下方顯示分頁圖標	true
controls	設置是否顯示上一副和下一幅按鈕	true
auto	設置是否自動滑動	false
pause	自動滑動時停留時間，數字，ms	4000
autoHover	當鼠標滑向滑動內容上時，是否暫停滑動	false