欢迎光临一流素材网,免积分免费素材下载!
AD

轮播图jQuery Immersive Slider

所属栏目:轮播图/幻灯片更新时间:2016-10-18原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

身临其境的滑块

创建一个身临其境的滑块改变了整个容器匹配观看幻灯片

使用步骤

将最新jQuery库和jquery.immersive slider.js添加到您的网站,

HTML中 <HEAD> </HEAD>中引用slider.css样式

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.immersive-slider.js"></script>
<link href='immersive-slider.css' rel='stylesheet' type='text/css'>

HTML标记如下:

<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">&laquo;</a>
    <a href="#" class="is-next">&raquo;</a>
  </div>
</div>

js中调用对应html中的id,"immersive_slider".

$("#immersive_slider").immersive_slider({
  animation: "bounce", //反弹  slideSelector: ".slide", 
  container: ".main",  
  cssBlur: false,    //模糊属性  pagination: true,   
  loop: true,      //循环  autoStart: 5000  //将此更改为0或false来禁用自动启动
  });

实验功能:CSSBlur

这个插件是能够模糊图像并用它作为背景,无需您手动设置每张幻灯片的背景图像。





具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1jQuery响应式触屏图片左右滚动代码owl.carousel

2轻量级响应式jQuery轮播图/幻灯片插件-lightslider

3移动端滑动JS响应式轮播图插件

4jQuery倾斜图片切换滚动焦点图幻灯片代码

5jQuery版仿淘宝商城天猫首页多格焦点图效果

6易迅网竖排多格jquery焦点图代码

7jQ索引按钮+缩略图双重切换

8兼容触屏手机浏览的JS全屏焦点图代码

9鼠标滑过+自动播放jQ全屏焦点图代码

10Diapo轮播图-幻灯片插件