zoukankan      html  css  js  c++  java
  • bxSlider使用

    占个坑,有空仔细研究下。

    官网:http://bxslider.com/

    优点:

    1.完全响应-将适应任何设备
    2.水平,垂直和褪色模式
    3.它可以包括图片,视频,或HTML内容
    4.先进的触摸/刷卡支持内置
    5.使用css滑动动画(本地硬件加速!)
    6.全回调函数和公共方法
    7.小文件大小,完全主题,简单实现
    8.浏览器:Firefox,Chrome,Safari支持iOS,Android,IE7 +,
    9.大量的配置选项

    支持:

    <!-- jQuery library (served from Google) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- bxSlider Javascript file -->
    <script src="/js/jquery.bxslider.min.js"></script>
    <!-- bxSlider CSS file -->
    <link href="/lib/jquery.bxslider.css" rel="stylesheet" />

    html:

    <li>标签中可以使用图片、视频、html

    <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/pic4.jpg" /></li>
    </ul>

    使用:

    $(document).ready(function(){
      $('.bxslider').bxSlider();
    });

    http://bxslider.com/examples

    有大量的使用案例

    参数设置:

    General

    mode
    Type of transition between slides
    default: 'horizontal'
    options: 'horizontal', 'vertical', 'fade'
    
    speed
    Slide transition duration (in ms)
    default: 500
    options: integer
    
    slideMargin
    Margin between each slide
    default: 0
    options: integer
    
    startSlide
    Starting slide index (zero-based)
    default: 0
    options: integer
    
    randomStart
    Start slider on a random slide
    default: false
    options: boolean (true / false)
    
    slideSelector
    Element to use as slides (ex. 'div.slide').
    Note: by default, bxSlider will use all immediate children of the slider element
    default: ''
    options: jQuery selector
    
    infiniteLoop
    If true, clicking "Next" while on the last slide will transition to the first slide and vice-versa
    default: true
    options: boolean (true / false)
    
    hideControlOnEnd
    If true, "Next" control will be hidden on last slide and vice-versa
    Note: Only used when infiniteLoop: false
    default: false
    options: boolean (true / false)
    
    easing
    The type of "easing" to use during transitions. If using CSS transitions, include a value for the transition-timing-function property. If not using CSS transitions, you may include plugins/jquery.easing.1.3.js for many options.
    See http://gsgd.co.uk/sandbox/jquery/easing/ for more info.
    default: null
    options: if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)
    
    captions
    Include image captions. Captions are derived from the image's title attribute
    default: false
    options: boolean (true / false)
    
    ticker
    Use slider in ticker mode (similar to a news ticker)
    default: false
    options: boolean (true / false)
    
    tickerHover
    Ticker will pause when mouse hovers over slider. Note: this functionality does NOT work if using CSS transitions!
    default: false
    options: boolean (true / false)
    
    adaptiveHeight
    Dynamically adjust slider height based on each slide's height
    default: false
    options: boolean (true / false)
    
    adaptiveHeightSpeed
    Slide height transition duration (in ms). Note: only used if adaptiveHeight: true
    default: 500
    options: integer
    
    video
    If any slides contain video, set this to true. Also, include plugins/jquery.fitvids.js
    See http://fitvidsjs.com/ for more info
    default: false
    options: boolean (true / false)
    
    responsive
    Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders.
    default: true
    options: boolean (true / false)
    
    useCSS
    If true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used.
    default: true
    options: boolean (true / false)
    
    preloadImages
    If 'all', preloads all images before starting the slider. If 'visible', preloads only images in the initially visible slides before starting the slider (tip: use 'visible' if all slides are identical dimensions)
    default: visible
    options: 'all', 'visible'
    
    touchEnabled
    If true, slider will allow touch swipe transitions
    default: true
    options: boolean (true / false)
    
    swipeThreshold
    Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true
    default: 50
    options: integer
    
    oneToOneTouch
    If true, non-fade slides follow the finger as it swipes
    default: true
    options: boolean (true / false)
    
    preventDefaultSwipeX
    If true, touch screen will not move along the x-axis as the finger swipes
    default: true
    options: boolean (true / false)
    
    preventDefaultSwipeY
    If true, touch screen will not move along the y-axis as the finger swipes
    default: false
    options: boolean (true / false)
    

    Pager

    pager
    If true, a pager will be added
    default: true
    options: boolean (true / false)
    
    pagerType
    If 'full', a pager link will be generated for each slide. If 'short', a x / y pager will be used (ex. 1 / 5)
    default: 'full'
    options: 'full', 'short'
    
    pagerShortSeparator
    If pagerType: 'short', pager will use this value as the separating character
    default: ' / '
    options: string
    
    pagerSelector
    Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport
    default: ''
    options: jQuery selector
    
    pagerCustom
    Parent element to be used as the pager. Parent element must contain a <a data-slide-index="x"> element for each slide. See example here. Not for use with dynamic carousels.
    default: null
    options: jQuery selector
    
    buildPager
    If supplied, function is called on every slide element, and the returned value is used as the pager item markup.
    See examples for detailed implementation
    default: null
    options: function(slideIndex)
    

    Controls

    controls
    If true, "Next" / "Prev" controls will be added
    default: true
    options: boolean (true / false)
    
    nextText
    Text to be used for the "Next" control
    default: 'Next'
    options: string
    
    prevText
    Text to be used for the "Prev" control
    default: 'Prev'
    options: string
    
    nextSelector
    Element used to populate the "Next" control
    default: null
    options: jQuery selector
    
    prevSelector
    Element used to populate the "Prev" control
    default: null
    options: jQuery selector
    
    autoControls
    If true, "Start" / "Stop" controls will be added
    default: false
    options: boolean (true / false)
    
    startText
    Text to be used for the "Start" control
    default: 'Start'
    options: string
    
    stopText
    Text to be used for the "Stop" control
    default: 'Stop'
    options: string
    
    autoControlsCombine
    When slideshow is playing only "Stop" control is displayed and vice-versa
    default: false
    options: boolean (true / false)
    
    autoControlsSelector
    Element used to populate the auto controls
    default: null
    options: jQuery selector
    

    Auto

    auto
    Slides will automatically transition
    default: false
    options: boolean (true / false)
    
    pause
    The amount of time (in ms) between each auto transition
    default: 4000
    options: integer
    
    autoStart
    Auto show starts playing on load. If false, slideshow will start when the "Start" control is clicked
    default: true
    options: boolean (true / false)
    
    autoDirection
    The direction of auto show slide transitions
    default: 'next'
    options: 'next', 'prev'
    
    autoHover
    Auto show will pause when mouse hovers over slider
    default: false
    options: boolean (true / false)
    
    autoDelay
    Time (in ms) auto show should wait before starting
    default: 0
    options: integer
    

    Carousel

    minSlides
    The minimum number of slides to be shown. Slides will be sized down if carousel becomes smaller than the original size.
    default: 1
    options: integer
    
    maxSlides
    The maximum number of slides to be shown. Slides will be sized up if carousel becomes larger than the original size.
    default: 1
    options: integer
    
    moveSlides
    The number of slides to move on transition. This value must be >= minSlides, and <= maxSlides. If zero (default), the number of fully-visible slides will be used.
    default: 0
    options: integer
    
    slideWidth
    The width of each slide. This setting is required for all horizontal carousels!
    default: 0
    options: integer
    

    Callbacks

    onSliderLoad
    Executes immediately after the slider is fully loaded
    default: function(){}
    options: function(currentIndex){ // your code here }
    arguments:
      currentIndex: element index of the current slide
    
    onSlideBefore
    Executes immediately before each slide transition.
    default: function(){}
    options: function($slideElement, oldIndex, newIndex){ // your code here }
    arguments:
      $slideElement: jQuery element of the destination element
      oldIndex: element index of the previous slide (before the transition)
      newIndex: element index of the destination slide (after the transition)
    
    onSlideAfter
    Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).
    default: function(){}
    options: function($slideElement, oldIndex, newIndex){ // your code here }
    arguments:
      $slideElement: jQuery element of the destination element
      oldIndex: element index of the previous slide (before the transition)
      newIndex: element index of the destination slide (after the transition)
    
    onSlideNext
    Executes immediately before each "Next" slide transition. Function argument is the target (next) slide element.
    default: function(){}
    options: function($slideElement, oldIndex, newIndex){ // your code here }
    arguments:
      $slideElement: jQuery element of the destination element
      oldIndex: element index of the previous slide (before the transition)
      newIndex: element index of the destination slide (after the transition)
    
    onSlidePrev
    Executes immediately before each "Prev" slide transition. Function argument is the target (prev) slide element.
    default: function(){}
    options: function($slideElement, oldIndex, newIndex){ // your code here }
    arguments:
      $slideElement: jQuery element of the destination element
      oldIndex: element index of the previous slide (before the transition)
      newIndex: element index of the destination slide (after the transition)
    

    Public methods

    goToSlide
    Performs a slide transition to the supplied slide index (zero-based)
    example:
    slider = $('.bxslider').bxSlider();
    slider.goToSlide(3);
    goToNextSlide
    Performs a "Next" slide transition
    example:
    slider = $('.bxslider').bxSlider();
    slider.goToNextSlide();
    goToPrevSlide
    Performs a "Prev" slide transition
    example:
    slider = $('.bxslider').bxSlider();
    slider.goToPrevSlide();
    startAuto
    Starts the auto show. Provide an argument false to prevent the auto controls from being updated.
    example:
    slider = $('.bxslider').bxSlider();
    slider.startAuto();
    stopAuto
    Stops the auto show. Provide an argument false to prevent the auto controls from being updated.
    example:
    slider = $('.bxslider').bxSlider();
    slider.stopAuto();
    getCurrentSlide
    Returns the current active slide
    example:
    slider = $('.bxslider').bxSlider();
    var current = slider.getCurrentSlide();
    getSlideCount
    Returns the total number of slides in the slider
    example:
    slider = $('.bxslider').bxSlider();
    var slideQty = slider.getSlideCount();
    reloadSlider
    Reload the slider. Useful when adding slides on the fly. Accepts an optional settings object. See here for an example.
    example:
    slider = $('.bxslider').bxSlider();
    slider.reloadSlider();
    destroySlider
    Destroy the slider. This reverts all slider elements back to their original state (before calling the slider).
    example:
    slider = $('.bxslider').bxSlider();
    slider.destroySlider();
    所有文章如需转载请与我联系!邮箱地址shanchao@qq.com 随笔有任何问题都可以在下面评论,我会及时的回复。 如有如何文章侵权问题,我会做删除处理。
  • 相关阅读:
    vue路由传参页面刷新参数丢失问题解决方案
    理解MVC,MVP 和 MVVM
    HTTPS用的是对称加密还是非对称加密?
    元素显示隐藏的9种思路
    CSS中层叠上下文
    DOM盒模型和位置 client offset scroll 和滚动的关系
    css重点知识和bug解决方法
    你可能不知道的CSS
    如何在 React 中优雅的写 CSS?
    html5不常用标签应用场景
  • 原文地址:https://www.cnblogs.com/KuckBoy-shan/p/5487929.html
Copyright © 2011-2022 走看看