基于jQuery焦点图百叶窗效果切换

基于jQuery焦点图百叶窗效果切换。这是一款带各种百叶窗过渡效果的jQuery幻灯片插件。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

 <div class="htmleaf-container">
        <div class="slider">
            <ul class="slider-main">
                <li>
                    <img src="images/1.jpg" alt="">
                </li>
                <li>
                    <img src="images/2.jpg" alt="">
                </li>
                <li>
                    <img src="images/3.jpg" alt="">
                </li>
                <li>
                    <img src="images/4.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>

    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="js/osSlider.js"></script>
    <script type="text/javascript">
        var slider = new osSlider({ //开始创建效果
            pNode: '.slider', //容器的选择器 必填
            cNode: '.slider-main li', //轮播体的选择器 必填
            speed: 3000, //速度 默认3000 可不填写
            autoPlay: true //是否自动播放 默认true 可不填写
        });
    </script>

via:http://www.w2bc.com/article/jquery-blind-focus

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3