siteslider不同背景色全屏滑动

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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

<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();