jQuery轮播图/内容滑块插件Quake Slider

所属分类:媒体-幻灯片和轮播图

 33436  408  查看评论 (13)
分享到微信朋友圈
X
jQuery轮播图/内容滑块插件Quake Slider ie兼容6

可用效果

  • swirlFadeIn

  • swirlFadeOut

  • randomFade

  • linearPeal

  • linearPealReverse

  • diagonalFade

  • blind

  • barsUp

  • barsDown

  • blindFade

  • explode

  • explodeFancy

  • mixBars

  • mixBarsFancy

  • fade

  • blindFadeReverse

  • slideIn

  • slideInFancy

  • slideLeft

  • slideRight

  • slideUp

  • slideDown

  • fallingBlindFade

  • raisingBlindFade

Quake Slider使用也非常简单。

  1. 最新的jQuery库添加引用

  2. 对quake.slider-min.js添加引用

  3. 对quake.slider.css添加引用

现在你需要创建一个DIV元素要放置滑块的地方。在这个div添加两个额外的div,一个为你的图像和其他标题如

<div class="quake-slider">
   <div class="quake-slider-images"> </div>
   <div class="quake-slider-captions"></div>
</div>

下面是一个完整的例子。

<html>
<head>
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <link href="css/quake.slider.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/quake.slider-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.quake-slider').quake({ effects: ['swirlFadeIn', 'swirlFadeOut'],
                thumbnails: true,
                captionOpacity: '0.3'
            });
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="quake-slider">
            <div class="quake-slider-images">
                <a target="_blank" href="#">
                    <img src="images/1.jpg" alt="Clean Business Free Business Website Premium Template" />
                </a><a target="_blank" href="#">
                    <img src="images/2.jpg" alt="Free Premium HTML Admin/Backend Template for Web Applications" /></a>
                <a target="_blank" href="#">
                    <img src="images/3.jpg" alt="Free HTML jQuery Portfolio Template" />
                </a><a target="_blank" href="#">
                    <img src="images/4.jpg" alt="jQuery Clean and Simple Tooltips Plugin" />
                </a>
            </div>
            <div class="quake-slider-captions quake-slider-caption-container">
                <div class="quake-slider-caption">
                    Clean Business, <span class='quake-highlight'><a target="_blank" href="#">
                        Premium HTML Template.</a></span> A Free Business Website
                    Template.</div>
                <div class="quake-slider-caption">
                    BlueWhale Admin, <span class='quake-highlight'><a target="_blank" href="#">Premium HTML Admin Template.</a></span>
                    Free Premium HTML Admin/Backend Template.</div>
            </div>
        </div>
    </div>
</body>
</html>


相关插件-幻灯片和轮播图

仿UC轮播插件imgSlider.js

js图片轮播幻灯片制作UC浏览器官网焦点图片切换,通过鼠标点击缩略图切换banner大图,带左右按钮控制缩略图片滚动切换,进行图片自动轮播
  幻灯片和轮播图
 32088  362

lightslider支持移动触摸的轻量级jQuery幻灯片插件

lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马。
  幻灯片和轮播图
 29587  355

淘宝首页图片自动轮循效果

jQuery淘宝首页图片自动轮循效果
  幻灯片和轮播图
 31330  312

jq焦点旋转轮播图

jq焦点旋转轮播图,这个切换还是挺特别的。
  幻灯片和轮播图
 34156  332

讨论这个项目(13)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    阿涛 0
    2016/10/4 14:10:20
    这个看起来不错,不知道多大! 回复
    知而不乎 0
    2016/9/28 14:09:51
    感谢楼主的分享~ 回复
    啃风无影 0
    2016/8/21 20:08:55
    看着感觉不挺好 回复
    李欣 0
    2016/7/28 22:07:53
    意思是要引入四个文件吗,两个css文件和两个js文件?
        李欣0
        2016/7/29 22:07:24
        改不了在屏幕中的布局!
    回复
    0
    2016/7/22 14:07:47
    wolfers/yhh 0
    2016/7/20 11:07:33
    leeds92 0
    2016/7/18 10:07:03
    什么垃圾东西啊  用了影响布局
        念念碎0
        2016/7/26 14:07:16
        为什么
    回复
    yanglingling 0
    2016/7/8 15:07:47
    不错,感谢楼主分享 回复
    hxh 0
    2016/7/5 12:07:25
    HEarTachepsR 0
    2016/6/28 11:06:51
    感谢楼主大大的分享 很棒 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复