owl.carousel.js 是一个强大、实用但小巧的 jQuery 幻灯片插件-BFW插件库

owl.carousel.js 是一个强大、实用但小巧的 jQuery 幻灯片插件

owl.carousel.js 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点：
兼容所有浏览器
支持响应式
支持 CSS3 过度
支持触摸事件
支持 JSON 及自定义 JSON 格式
支持进度条
支持自定义事件
支持延迟加载
支持自适应高度
Owl Carousel 提供了众多的参数、回调函数及自定义事件（具体请往下浏览），所以它几乎可以满足你的所有要求。

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件及css和主题css

第三步配置参数

参数	类型	默认值	说明
items	整数	5	幻灯片每页可见个数
itemsDesktop	数组	[1199,4]	设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false
itemsDesktopSmall	数组	[979,3]	同上
itemsTablet	数组	[768,2]	同上
itemsTabletSmall	数组	false	同上，默认为 false
itemsMobile	数组	[479,1]	同上
itemsCustom	数组	false
singleItem	布尔值	false	是否只显示一张
itemsScaleUp	布尔值	false
slideSpeed	整数	200	幻灯片切换速度，以毫秒为单位
paginationSpeed	整数	800	分页切换速度，以毫秒为单位
rewindSpeed	整数	1000	重回速度，以毫秒为单位
autoPlay	布尔值/整数	false	自动播放，可选布尔值或整数，若使用整数，如 3000，表示 3 秒切换一次；若设置为 true，默认 5 秒切换一次
stopOnHover	布尔值	false	鼠标悬停停止自动播放
navigation	布尔值	false	显示“上一个”、“下一个”
navigationText	数组	[“prev”,”next”]	设置“上一个”、“下一个”文字，默认是[“prev”,”next”]
rewindNav	布尔值	true	滑动到第一个
scrollPerPage	布尔值	false	每页滚动而不是每个项目滚动
pagination	布尔值	true	显示分页
paginationNumbers	布尔值	false	分页按钮显示数字
responsive	布尔值	true
responsiveRefreshRate	整数	200	每 200 毫秒检测窗口宽度并做相应的调整，主要用于响应式
responsiveBaseWidth	jQuery 选择器	window
baseClass	字符串	owl-carousel	添加 CSS，如果不需要，最好不要使用
theme	字符串	owl-theme	主题样式，可以自行添加以符合你的要求
lazyLoad	布尔值	false	延迟加载
lazyFollow	布尔值	true	当使用分页时，如果跨页浏览，将不加载跳过页面的图片，只加载所要显示页面的图片，如果设置为 false，则会加载跳过页面的图片。这是 lazyLoad 的子选项
lazyEffect	布尔值/字符串	fade	延迟加载图片的显示效果，默认以 400 毫秒淡入，若为 false 则不使用效果
autoHeight	布尔值	false	自动使用高度
jsonPath	字符串	false	JSON 文件路径
jsonSuccess	函数	false	处理自定义 JSON 格式的函数
dragBeforeAnimFinish	布尔值	true	忽略过度是否完成（只限拖动）
mouseDrag	布尔值	true	关闭/开启鼠标事件
touchDrag	布尔值	true	关闭/开启触摸事件
addClassActive	布尔值	false	给可见的项目加入 “active” 类
transitionStyle	字符串	false	添加 CSS3 过度效果

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">

        var time = 7; //进度条时间，以秒为单位，越小越快

        var $progressBar, $bar, $elem, isPause, tick, percentTime;
        bready(function() {
            use(["owl.carousel", "owl.carousel|owl.theme"], function() {
                $('#owl-demo').owlCarousel();
                $('#owl-demo2').owlCarousel({
                    items: 4,
                    lazyLoad: true,
                    navigation: true,
                    navigationText: ["上一个", "下一个"]
                });


                $('#owl-demo3').owlCarousel({
                    slideSpeed: 500,
                    paginationSpeed: 500,
                    singleItem: true,
                    afterInit: progressBar,
                    afterMove: moved,
                    startDragging: pauseOnDragging
                });


            });
        });
        function progressBar(elem) {
            $elem = elem;
            buildProgressBar();
            start();
        }

        function buildProgressBar() {
            $progressBar = $('<div>', {
                id: 'progressBar'
            });
            $bar = $('<div>', {
                id: 'bar'
            });
            $progressBar.append($bar).insertAfter($elem.children().eq(0));
        }

        function start() {
            percentTime = 0;
            isPause = false;
            tick = setInterval(interval, 10);
        }

        function interval() {
            if (isPause === false) {
                percentTime += 1 / time;
                $bar.css({
                    width: percentTime+'%'
                });
                if (percentTime >= 100) {
                    $elem.trigger('owl.next')
                }
            }
        }

        function pauseOnDragging() {
            isPause = true;
        }

        function moved() {
            clearTimeout(tick);
            start();
        }

        $elem.on('mouseover', function() {
            isPause = true;
        })

        $elem.on('mouseout', function() {
            isPause = false;
        });
    </script>
    <style>
        .owl-demo {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .owl-demo .item {
            display: block;
            margin: 5px;
        }
        .owl-demo img {
            display: block;
            width: 100%;
        }
        #bar {
            width: 0%;
            max-width: 100%;
            height: 4px;
            background: #7fc242;
            overflow: hidden;
        }
        #progressBar {
            width: 100%;
            background: #ededed;
        }
    </style>

</head>
<body>
    <!-- Demo --><h1>默认</h1>
    <div id="owl-demo" class="owl-carousel owl-demo">
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt=""></a>
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt=""></a>
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt=""></a>
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt=""></a>

    </div>
    <h1>延迟加载</h1>
    <div id="owl-demo2" class="owl-carousel owl-demo">
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt=""></a>
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt=""></a>
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt=""></a>
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt=""></a>

    </div>
    <h1>带进度条</h1>
    <div id="owl-demo3" class="owl-carousel owl-demo">
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt=""></a>
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt=""></a>
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt=""></a>
        <a class="item"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt=""></a>

    </div>

</body>
</html>

owl.carousel.js 是一个强大、实用但小巧的 jQuery 幻灯片插件

网友评论0

zturn.js

PicCarousel.js

jquery.flipster.js

SliceBox.js

slideBox.js

slick.js

bxslider.js

caroursel.js

windy.js

impress.js