百叶窗插件的使用

    我们做项目的时候我要做一个登陆页面，但是我要做的是百叶窗轮播样式的登陆页面，效果图如下：

上面图片是会有一个很炫酷的切换的，请自己脑补一下。

要做到上面的效果要调用的插件是：

CSS:

JS:

要注意，这个百叶窗插件好像是支持jquery-3.2.1.min.js这个版本的插件。

话不多少，下面我们来看代码。 

先看CSS的代码 

<div class="camera_wrap" id="camera_wrap_4">

                <div data-thumb="/Pligins/img/gallery/123.png" data-src="/Pligins/img/gallery/123.png"></div>

                <div data-thumb="/Pligins/img/gallery/321.jpeg" data-src="/Pligins/img/gallery/321.jpeg"></div>

                <div data-thumb="/Pligins/img/gallery/666.jpg" data-src="/Pligins/img/gallery/666.jpg"></div>

            </div>

JS代码：

        window.onload = function () {

            $('#camera_wrap_4').camera({

                height: 'auto',

                loader: 'bar',

                pagination: false,

                thumbnails: false,

                hover: false,

                opacityOnGrid: false,

                navigation: false,

                playPause: false,

                time: 2

            });

        }

百叶窗的配置可以自己设置，配置文件如下图所示。

这样就可以做到百叶窗轮播切换图片。

注意：你要在VS中用这个百叶窗插件要注意，你的图片和插件要放到同一个文件夹内，要不会找不到图片。

这是我的一些经验和总结。