lib > scrollslide

全画面対応スライド

by s_hiroshi

HTML

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="robots" content="index,follow" />
        <meta name="keywords" content="javascript, scroll, slide">
        <meta name="description" content="JavaScript scroll slide script">
        <title>scroll slide JavaScript</title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.9.0/build/reset-fonts/reset-fonts.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="js/scrollslide.js"></script>
    </head>
    <body>

        <div id="slide-container">
            <div class="slide-group">
                <div class="page">
                    <h2>Page0</h2>
                    <p>
                    Vivamus vitae neque at lorem mollis blandit vel.
                    </p>
                </div><!-- /page -->

                <div class="page">
                    <h2>Page1</h2>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing.
                    </p>
                </div><!-- /page -->

                <div class="page">
                    <h2>Page2</h2>
                    <p>
                    Pellentesque quis mauris dui.
                    </p>
                </div><!-- /page -->

                <div class="page">
                    <h2>Page3</h2>
                    <p>
                    Proin ut neque mi. Maecenas pharetra facilisis.
                    </p>
                </div><!-- /page -->

                <div class="page">
                    <h2>Page4</h2>
                    <p>
                    Phasellus egestas mi eu felis fringilla vestibulum.
                    </p>
                </div><!-- /page -->
            </div><!-- /slide-group -->
        </div><!-- /slide-container -->
        
        <ul id="slide-nav" class="clearfix">
           ...

CSS

@charset "utf-8";
/**
 * Copyright 2012 Sawai Hiroshi
 * http://www.info-town.jp
 *
 */


/* -------------------------------------------------------------------
body
 ------------------------------------------------------------------- */
body {
}
a:link {
    color: #666;
}
a:visited {
    color: #666;
}
a:hover {
    color: #666;
}
a:active {
    color: #666;
}
/* -------------------------------------------------------------------
slide-nav
 ------------------------------------------------------------------- */
ul#slide-nav {
    width: 740px;
    margin: 0 auto;
}
ul#slide-nav li {
    float: left;
}
ul#slide-nav li a {
    display: block;
    padding:  15px 20px;
    text-decoration: none;
    outline: none;
}
/* -------------------------------------------------------------------
slide-container
 ------------------------------------------------------------------- */
#slide-container {
    width: 100%;
    height: 400px;
    margin: 20px auto;
    background: #EEE;
}
/* -------------------------------------------------------------------
slide-group
 ------------------------------------------------------------------- */
#slide-group {
    position: absolute;
    /* script caluculate width */
    height: 400px;
    background: #666;
}
/* -------------------------------------------------------------------
page unit of slide
 ------------------------------------------------------------------- */
.page {
    clear: both;
    position: absolute;
    width: 960px;
    height: 400px;
    background: #DDD;
    z-index: 2;
}
.page h2 {
    margin: 2em 2em 1em;
}
.page p {
    margin: 0 2em 1em;
}
.page .arrow-right {
    position: absolute;
    bottom: 10px;
    right: 20px;
    width: 18px;
    height: 18px;
    background: #CCC;
    text-align: center;
    cursor: pointer;
}
.page .arrow-left {
    position: absolute;
    bottom: 10px;
    left: 20px;
    width: 18px;
    height: 18px;
    background: #CCC;
    text-align: center;
    cursor: pointer;
}
/*...

JavaScript

/**
 * scrollslide.js
 *
 * Copyright 2012 Sawai Hiroshi
 * http://www.info-town.jp
 *
 */

jQuery(function($) {
    /**
     * utilities
     */

    // create object from object
    if (!Object.create) {
        (function() {
            function F() {}

            Object.create = function(object) {
                F.prototype = object;
                return new F();
            };
        }());
    }


    // namespace
    var infotown = {};
    infotown.namespace = function() {
        var object = this;
        return function(name) {
            if (typeof object[name] == "undefined") {
                object[name] = {};
            }
            return object[name];
        };
    }();


    // implement layout object and handler object
    (function() {
        /**
         * common property
         */
        var i, currentPageIndex = 0,
            pageSelector = '.page',
            group = [],
            inc = 960,
            groupWidth = 0,
            settings = {
                'slideSelector': '#slide-container',
                'groupSelector': '.slide-group'
            },
            options;


        /**
         * Create layout object
         */
        var layout = infotown.namespace('layout');

        /**
         * initialize layout object
         *
         * class name 'page' elemement align horizonal
         *
         * @param {jQuery} outer jQuery element
         * @param {String} direction slide direction (right,left) optional
         * @param {Number} height optional
         */

        function _init(outer, direction, height, top) {
            direction = direction || 'right';
            height = (height === 'auto') ? outer.height() : height;
            top = top || 0;
            outer.css({
                overflow: 'hidden',
                position: 'relative',
                width: $(window).width()
            });

            // list of pageSelector class
            // default pageSelector .page
          ...