插件描述： 身临其境的滑块 创建一个身临其境的滑块改变了整个容器匹配观看幻灯片
身临其境的滑块
创建一个身临其境的滑块改变了整个容器匹配观看幻灯片
使用步骤
将最新jQuery库和jquery.immersive slider.js添加到您的网站,
HTML中 <HEAD> </HEAD>中引用slider.css样式
1 2 3 | <script type="text/javascript" src="jquery.immersive-slider.js"></script><link href='immersive-slider.css' rel='stylesheet' type='text/css'> |
HTML标记如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="main"> ... <div id="immersive_slider"> <div class="slide" data-blurred="<<background-image-url>>"> ... </div> <div class="slide" data-blurred="<<background-image-url>>"> ... </div> ... <a href="#" class="is-prev">«</a> <a href="#" class="is-next">»</a> </div></div> |
js中调用对应html中的id,"immersive_slider".
1 2 3 4 5 6 7 8 9 | $("#immersive_slider").immersive_slider({ animation: "bounce", //反弹 slideSelector: ".slide", container: ".main", cssBlur: false, //模糊属性 pagination: true, loop: true, //循环 autoStart: 5000 //将此更改为0或false来禁用自动启动}); |
实验功能：CSSBlur
这个插件是能够模糊图像并用它作为背景，无需您手动设置每张幻灯片的背景图像。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 字体变形插件Circletype
- 下一个特效： 进度插件-Progression.js