首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >bxslider使用帮助

bxslider使用帮助

作者头像
菲宇
发布2022-12-21 18:52:45
发布2022-12-21 18:52:45
2.2K0
举报
文章被收录于专栏:菲宇菲宇

“bxSlider”就是一款响应式的幻灯片js插件

bxSlider特性

充分响应各种设备,适应各种屏幕;

支持多种滑动模式,水平、垂直以及淡入淡出效果;

支持图片、视频以及任意html内容;

支持触摸滑动;

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

bxSlider使用方法:

加载jQuery库,加载bxSlider插件文件和相关CSS文件;

代码语言:javascript
复制
    <!-- 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>

创建一个幻灯片区块:

代码语言:javascript
复制
    <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参数激活使用:

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

bxSlider下载地址:官方下载

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

Simple, focused

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档