coverscroll.js 是一款模拟mac图片墙效果的图片轮换插件-BFW插件库

coverscroll.js 是一款模拟mac图片墙效果的图片轮换插件

coverscroll.js 是一款模拟mac图片墙效果的图片轮换插件。

使用方式：

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

第二步use插件

<script type="text/javascript">
        bready(function() {
            use(["coverscroll.min"], function() {
                $('#container2').coverscroll();
            });
        });
</script>

第三步配置参数

//这是默认的选项：

var opt = {

	'minfactor':20, // 下一个项目是多少比以前的以像素为单位

	'distribution':1.5, // 如何分开的项目（项目走散当该值低于1）

	'scalethreshold':0, // 多少个项目后，开始缩放

	'staticbelowthreshold':false, // 如果为true时，件数下面的“scalethreshold”， - 不动画

	'titleclass':'itemTitle', // 类名的元素包含的项目标题

	'selectedclass':'selectedItem', // 所选项目的类名

	'scrollactive':true, // 滚动功能开关

	'step':{ // 压缩步骤

	'limit':4, // 多少步上应显示的每一侧

	'width':8, // 工序（以像素为单位）的可见部分有多宽

	'scale':true // 缩减步骤

	},

	'bendamount':2, // “弯曲”的CoverScroll（值0.1至1弯下腰，-0.1至-1弯，2的量是直（没有弯曲），1.5 sligtly弯下腰）

	'movecallback':function(item){} // 回调函数触发后单击一个项目 - 参数是该项目的jQuery对象

};

方法

next - 移动到下一个项目
$('#container').coverscroll('next');

prev - 移动到上一个项目
$('#container').coverscroll('prev');

示例代码

<!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">
        bready(function() {
            use(["coverscroll.min"], function() {
                $('#container').coverscroll();
            });
        });
    </script>
    <style>


        #container {
            width: 460px;
            height: 160px;
        }

        #container img, #container .item {


            -webkit-border-radius: 10px;

            -moz-border-radius: 10px;

            -o-border-radius: 10px;

            border-radius: 10px;

            -moz-box-shadow: 0px 5px 5px #777;

            -webkit-box-shadow: 0px 5px 5px #777;

            box-shadow: 0px 5px 5px #777;

        }


    </style>
</head>
<body>


    <div id="container">

        <img title="title #1" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />

        <img title="title #3" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />

        <img title="title #2" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />

        <img title="title #1" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />

        <img title="title #4" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />

        <img title="title #1" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />

        <img title="title #5" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />

        <img title="title #5" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />

        <img title="title #6" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />

        <img title="title #1" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />

        <img title="title #1" src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_60,/quality,q_90" />
    </div>

</body>
</html>

coverscroll.js 是一款模拟mac图片墙效果的图片轮换插件

网友评论0

zturn.js

PicCarousel.js

jquery.flipster.js

SliceBox.js

slideBox.js

slick.js

bxslider.js

caroursel.js

windy.js

impress.js