siteslider不同背景色全屏滑动

本文演示了siteslider切换不同背景色和图片。通过jQuery和CSS3动画我们可以创造独特的幻灯片内容元素的转换，而且这个导航菜单有分页的效果。

分类：图片代码 > 宽屏难易：高级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

滚动图片和导航菜单结构图

<div id="slider" class="sl-slider-wrapper">
    <div class="sl-slider">
        <div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
            <div class="sl-slide-inner">
                <div class="deco" data-icon="H"></div>
                <h2>A bene placito</h2>
                <blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
            </div>
        </div>

        <div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
            <div class="sl-slide-inner">
                <div class="deco" data-icon="q"></div>
                <h2>Regula aurea</h2>
                <blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
            </div>
        </div>
    </div>

    <nav id="nav-arrows" class="nav-arrows">
        <span class="nav-arrow-prev">Previous</span>
        <span class="nav-arrow-next">Next</span>
    </nav>

    <nav id="nav-dots" class="nav-dots">
        <span class="nav-dot-current"></span>
        <span></span>
    </nav>

</div>

引入相关插件

<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="js/jquery.slitslider.js"></script>

var Page = (function() {

    var $navArrows = $('#nav-arrows'),
            $nav = $('#nav-dots > span'),
            slitslider = $('#slider').slitslider({
        onBeforeChange: function(slide, pos) {

            $nav.removeClass('nav-dot-current');
            $nav.eq(pos).addClass('nav-dot-current');

        }
    }),
            init = function() {

                initEvents();

            },
            initEvents = function() {

                // add navigation events
                $navArrows.children(':last').on('click', function() {

                    slitslider.next();
                    return false;

                });

                $navArrows.children(':first').on('click', function() {

                    slitslider.previous();
                    return false;

                });

                $nav.each(function(i) {

                    $(this).on('click', function(event) {

                        var $dot = $(this);

                        if (!slitslider.isActive()) {

                            $nav.removeClass('nav-dot-current');
                            $dot.addClass('nav-dot-current');

                        }

                        slitslider.jump(i + 1);
                        return false;

                    });

                });

            };

    return {init: init};

})();

Page.init();