Immersive Slider是一款背景模糊的响应式图片轮播插件。本文演示了Immersive Slider5种滚动效果,相关API教程请看详细DEMO展示。
Immersive Slider图片轮播html代码
<div id="immersive_slider">
<div class="slide" data-blurred="img/slide1_blurred.jpg">
<div class="content">
<h2>
<a href='http://www.sucaihuo.com/js/540.html' target='_blank'>jQuery圣诞节小雪花</a>
</h2>
<p>
christmassnow下雪插件可以给你的网站增添圣诞的气息,让你的用户感觉在过圣诞节。
</p>
</div>
<div class="image">
<img src="img/slide1.jpg" alt="Slider 1">
</div>
</div>
<div class="slide" data-blurred="img/slide2_blurred.jpg">
<div class="content">
<h2>
<a href='http://www.sucaihuo.com/js/542.html' target='_blank'>jQuery仿京东弹出层</a>
</h2>
<p>
本文通过Bootstrap的modal方法并结合Ajax显示京东登录层,bootstrap插件的modal方法已经封装在jquery.js里面。
</p>
</div>
<div class="image">
<img src="img/slide2.jpg" alt="Slider 2">
</div>
</div>
<div class="is-nav">
<a href="#" class="is-prev">«</a>
<a href="#" class="is-next">»</a>
</div>
</div>
演示一:默认配置
$("#immersive_slider").immersive_slider({
container: ".main"
});
演示二:<a href='http://www.sucaihuo.com/jquery/demo/6/631/index2.html' target='_blank'>淡入淡出</a>
$("#immersive_slider").immersive_slider({
container: ".main", //目标容器
animation: "fade",//动画效果:淡入淡出
autoStart: false //是否自动轮播
});
演示三:<a href='http://www.sucaihuo.com/jquery/demo/6/631/index3.html' target='_blank'>反弹动画</a>
$("#immersive_slider").immersive_slider({
container: ".main",
animation: "bounce",
autoStart: false
});
演示四:<a href='http://www.sucaihuo.com/jquery/demo/6/631/index4.html' target='_blank'>垂直滚动</a>
$("#immersive_slider").immersive_slider({
container: ".main",
animation: "slideUp",
autoStart: false,
loop: false //是否循环
});
演示四:<a href='http://www.sucaihuo.com/jquery/demo/6/631/index5.html' target='_blank'>向上反弹</a>(只在google浏览器生效)
$("#immersive_slider").immersive_slider({
container: ".main",
animation: "bounceUp",
cssBlur: true
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791