lib > smoothslide

シンプルなスライダー

by s_hiroshi

HTML

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

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

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

    </div><!-- slide-group -->
    </div><!-- /slide-container -->
    
    <ul id="slide-nav" class="clearfix">
        <li><a id="next" href="#">next slide</a></li>
        <li><a id="interval" href="#">timer</a></li>
        <li><a id="stop" href="#">stop timer</a></li>
</ul>

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 {
    overflow: hidden;
    width: 980px;
    height: 400px;
    background: #EEE;
}
/* -------------------------------------------------------------------
slide-group
 ------------------------------------------------------------------- */
#slide-group {
    position: absolute;
    /* script caluculate width */
    height: 400px;
    background: #666;
}

/* -------------------------------------------------------------------
unit of slide
 ------------------------------------------------------------------- */
.slide {
    clear: both;
    position: absolute;
    width: 980px;
    height: 400px;
    background: #DDD;
    z-index: 2;
}
.slide h2 {
    margin: 2em 2em 1em;
}
.slide p {
    margin: 0 2em 1em;
}
/* -------------------------------------------------------------------
clearfix
 ------------------------------------------------------------------- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
min-height: 1%;
}
/* Hides from -mac \*/
* html .clearfix {height: 1%;}
.clearfix {display:...

JavaScript

// global variable is jQuery
// top level variable in smoothslide is infotown
/**
 * smoothslide.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 = {};
    // extend jQuery
    $.extend({
        'infotown': 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, group, groupWidth = 0,
            slideWidth = 0,
            settings = {
                'containerSelector': '#slide-container',
                'groupSelector': '#slide-group',
                'slideSelector': '.slide',
                'scrollAmount': '',
                'animateDuration': 470,
                'timerDuration': 940
            },
            timer, isInterval = false,
            currentSlide = 0,
            maxSlide = 0;


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


        /**
         * initialize layout object
         *
         * slide elemement align horizonal
         * @param {Object} options optional argument
         */

        function _init(options) {
            var container;

            $.extend(settings, options);

            container = $(settings.containerSelector);
            settings.scrollAmount = (settings.scrollAmount > 0) ? settings.scrollAmount : container.outerWidth();

       ...