滑动插件bxSlider-demo

最新推荐文章于 2024-03-15 09:34:23 发布

月迷津渡丶

最新推荐文章于 2024-03-15 09:34:23 发布

阅读量1.2k

点赞数

分类专栏： Web 文章标签：前端开发 jquery bxSlider

本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/46402881

版权

Web 专栏收录该内容

145 篇文章 0 订阅

订阅专栏

    <link href="jquery.bxslider.css" rel="stylesheet" type="text/css">
    <script src="../jquery-2.1.3.min.js"></script>
    <script src="jquery.bxslider.min.js"></script>

<style>
    ul li ul li{
        float:left;
        width:200px;
        height:200px;
        border:1px solid black;
        margin:0 39px 10px;
        font-size:60px;
        line-height: 200px;
        text-align: center;
        color:blue;
    }
    li{
        list-style-type:none;
    }
    .demo{
        width:1200px;
        margin:0 auto;
    }

</style>
<body>
<div class="demo">
    <ul class="d-ul">
        <li>
            <ul>
                <li>1-1</li>
                <li>1-2</li>
                <li>1-3</li>
                <li>1-4</li>
                <li>1-5</li>
                <li>1-6</li>
                <li>1-7</li>
                <li>1-8</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>2-1</li>
                <li>2-2</li>
                <li>2-3</li>
                <li>2-4</li>
                <li>2-5</li>
                <li>2-6</li>
                <li>2-7</li>
                <li>2-8</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>3-1</li>
                <li>3-2</li>
                <li>3-3</li>
                <li>3-4</li>
                <li>3-5</li>
                <li>3-6</li>
                <li>3-7</li>
                <li>3-8</li>
            </ul>
        </li>
    </ul>
</div>
</body>

    $(function () {
        $('.d-ul').bxSlider();
    });

效果：

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

月迷津渡丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滑动插件bxSlider-demo

ul li ul li{ float:left; width:200px; height:200px; border:1px solid black; margin:0 39px 10px; font-size:60px; line-height: 200px; text
复制链接

扫一扫

专栏目录