百叶窗效果

发工具与关键技术： Visual Studio 2015 mvc

作者：彭水清

撰写时间：2019/6/17

百叶窗应该是很多人都喜欢的效果吧，百叶窗效果是无规则的切换，是千姿百态的。为什么会有那么多人喜欢百叶窗呢，我想应该就是被它这种无规则的切换和那淡入淡出等等的效果所吸引了吧。那接下来我们就一起来看一下，我是怎样实现百叶窗效果的。

其实最重要的就是这些已经封装好的插件。插件如下：

jquery-1.8.3.min.js     


camera.min.js"

jquery.easing.1.3.js

HTML部分的代码都是已经封装好的了，我们只要把图片的路径放进去就可以了。但是只写HTML这部分的代码还没有百叶窗的效果的，还地写js的代码

             <div data-src="/image/tooopen_18094254.jpg"></div>                  

             <div data-src="/image/d8d22538a6c481fe7ad3e11e9a4ff1a1.jpg"></div>

             <div data-src="/image/d70143959d11b012d242a3123168ba86

(1).jpg">

             <div data-src="/image/8882d2a50ff075834ba94e9b5bae5a8d.jpg" ></div>

             <div data-src="/image/616eb2b317e50c231265a251ff1a3bcd.jpg"></div>

             <div data-src="/image/61.jpg"></div>

             <div data-src="/image/5e89a6d90cf02e32ded25d5a27a46896.jpg"></div>

             <div data-src="/image/41.jpg"></div>

             <div data-src="/image/162_17784.jpg" ></div>

             <div data-src="/image/162_17800.jpg"></div>

Js代码如下：

下面是JS上的参数, 也就是控制幻灯片的：

我用到了：height: ‘’ 幻灯片的高度；loader: 加载图标(pie, bar, none)；pagination: 是否显示分页(true, false)；thumbnails: 是否显示缩略图(true, false)；hover: 鼠标经过幻灯片时暂停(true, false)；time: 幻灯片播放时间( 填数字 ) loaderColor: 加载图标颜色( ‘颜色值,例如:#eee’ )；pauseOnClick: 鼠标点击后是否暂停(true, false) loaderPadding: 加载图标的大小( 填数字,默认为2 )；navigationHover:
鼠标经过时左右箭头显示/隐藏(true, false)；navigation: 左右箭头显示/隐藏(true, false)；playPause: 暂停按钮显示/隐藏(true, false)

原图图片如下：

百叶窗效果图如下：

@水平有限，错误和失误在所难免，若有如何意见和建议，请不吝指正，谢谢！