分享一个好看的幻灯效果(有演示有下载 还兼容IE)

是一个同事发过来的,火柴觉得切换效果很棒,难能可贵的是还兼容IE系列~~ 本质是一个基于jquery的插件 quake.slider-min.js 。

引入必要的jquery

 <script src="js/jquery.min.js" type="text/javascript"></script>
再引入quake.slider-min.js 和样式 (默认效果就不错,可以自己修改js 火柴表示完全可二次开发)

  <link href="css/quake.slider.css" rel="stylesheet" type="text/css" />
    <script src="js/quake.slider-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.quake-slider').quake({ effects: ['swirlFadeIn', 'swirlFadeOut', 'swirlFadeIn', 'linearPealReverse', 'slideIn', 'swirlFadeIn', 'explodeFancy'],
                thumbnails: false,
                hasNextPrev: true,
                captionOpacity: '0.3'             

            });                      

        });
    </script>
HTML

    <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><a target="_blank" href="#">
                    <img src="images/5.jpg" alt="jQuery Plugin for On Demand Search Box" />
                </a><a target="_blank" href="#">
                    <img src="images/6.jpg" alt="Multi Level Hierarchical jQuery Menu" />
                </a><a target="_blank" href="#">
                    <img src="images/9.jpg" alt="XML Driven Vertical New Scroller Script Using HTML and jQuery" />
                </a><a target="_blank" href="#">
                    <img src="images/16.jpg" alt="jQuery Spin Button Control Plugin" />
                </a>
            </div>
         
</div>

</div>
=============================================================

演示:http://www.158code.com/demo/quake/

下载:http://www.158code.com/demo/quake.zip


分享至
2014-03-24 发布 ┊ 6410 人浏览 ┊ 0 人评论 ┊ 来源:原创 ┊ 收藏
返回顶部