jQuery補充，基於jQuery的bxslider輪播器插件

本文轉載自查看原文 2017-05-11 23:09 1995 Python

基於jQuery的bxslider輪播器插件

html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>bxslider介紹</title>
    <!--引入bxslider樣式文件-->
    <link rel="stylesheet" href="bxslider/jquery.bxslider.min.css">
</head>
<body>
<!--普通輪播圖-->
<ul class="bxslider">
    <li><img src="http://placehold.it/350x150&text=FooBar1"/></li>
    <li><img src="http://placehold.it/350x150&text=FooBar2"/></li>
    <li><img src="http://placehold.it/350x150&text=FooBar3"/></li>
</ul>
<!--橫向旋轉木馬輪播-->
<div class="slider1">
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
</div>
<!--縱向旋轉木馬輪播-->
<div class="slider8">
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar1"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar2"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar3"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar4"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar5"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar6"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar7"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar8"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar9"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar10"></div>
</div>
<!--引入jquery文件-->
<script src="jquery/jquery.min.js"></script>
<!--引入bxslider里的js-->
<script src="bxslider/jquery.bxslider.min.js"></script>
<script src="ceshi.js"></script>
</body>
</html>

/**
 * Created by admin on 2017/5/2.
 */
$(function () {
    //<!--普通輪播圖-->
    $('.bxslider').bxSlider({auto: true, autoControls: true});

    //<!--橫向旋轉木馬輪播-->
    $('.slider1').bxSlider({auto: true, slideWidth: 200, minSlides: 2, maxSlides: 3, slideMargin: 10});

    //<!--縱向旋轉木馬輪播-->
    $('.slider8').bxSlider({
        mode: 'vertical',
        slideWidth: 300,
        minSlides: 2,
        slideMargin: 10
    });
});

官方網站：http://bxslider.com/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery插件bxslider用法實例分析響應式內容滑動插件jQuery.bxSlider jQuery插件之路(二)——輪播自己定義jquery插件輪播圖【原創】jQuery插件之圖片輪播 jQuery封裝輪播圖插件 jquery插件講解：輪播（SlidesJs）+驗證（Validation）基於Jquery的banner輪播插件,簡單粗暴 jQuery焦點圖輪播slide插件 PgwSlideshow-基於Jquery的圖片輪播插件