Immersive响应式背景模糊的广告幻灯片

来源:https://www.sucaihuo.com/js/631.html 2015-12-31 19:16浏览(865) 收藏

Immersive Slider是一款背景模糊的响应式图片轮播插件。本文演示了Immersive Slider5种滚动效果,相关API教程请看详细DEMO展示。
Immersive响应式背景模糊的广告幻灯片
分类:图片代码 > 广告 难易:初级
查看演示 下载资源 下载积分: 20 积分

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
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2