你的位置:首页 > Java教程

[Java教程]jQuery siteslider 动画幻灯片


在线实例

效果一效果二

使用方法

<div >            <div id="slider" >                <div >                    <div  data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">                        <div >                            <div  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  data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">                        <div >                            <div  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  data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">                        <div >                            <div  data-icon="O"></div>                            <h2>Dum spiro, spero</h2>                            <blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>                        </div>                    </div>                    <div  data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">                        <div >                            <div  data-icon="I"></div>                            <h2>Donna nobis pacem</h2>                            <blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>                        </div>                    </div>                    <div  data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">                        <div >                            <div  data-icon="t"></div>                            <h2>Acta Non Verba</h2>                            <blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>                        </div>                    </div>                </div><!-- /sl-slider -->                <nav id="nav-arrows" >                    <span >Previous</span>                    <span >Next</span>                </nav>                <nav id="nav-dots" >                    <span ></span>                    <span></span>                    <span></span>                    <span></span>                    <span></span>                </nav>            </div><!-- /slider-wrapper -->        </div>        <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.8.2/jquery.min.js"></script>        <script type="text/javascript" src="http://www.cnblogs.com//api/jq/5733e3636bc3e/js/jquery.ba-cond.min.js"></script>        <script type="text/javascript" src="http://www.cnblogs.com//api/jq/5733e3636bc3e/js/jquery.slitslider.js"></script>        <script type="text/javascript">            $(function() {                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();            });        </script>