jQuery > Plugin > slide

シンプルなスライドショー

HTML

<div class="slide">
    <div class="view">
        <div class="item active"><img src="http://farm6.staticflickr.com/5459/7400857386_99f1b0cc94_m.jpg" alt="slide1, photo1"></div>
        <div class="item"><img src="http://farm8.staticflickr.com/7225/7320695428_9a042ca4d4_m.jpg" alt="slide1, photo2"></div>
        <div class="item"><img src="http://farm8.staticflickr.com/7233/7320683548_69c3c60012_m.jpg" alt="slide1, photo3"></div>
    </div><!-- /view -->
    <div class="nav">
        <div class="item"><span>1</span></div>
        <div class="item"><span>2</span></div>
        <div class="item"><span>3</span></div>
    </div><!-- /nav -->
</div><!-- /slide -->
<div class="slide">
    <div class="view">
        <div class="item active"><img src="http://farm7.staticflickr.com/6122/5921605859_4bbe36a0b0_m.jpg" alt="slide2, photo1"></div>
        <div class="item"><img src="http://farm7.staticflickr.com/6126/5920448731_4cecf0af94_m.jpg" alt="slide2, photo2"></div>
        <div class="item"><img src="http://farm7.staticflickr.com/6030/5920933492_c2f0288ac7_m.jpg" alt="slide2, photo3"></div>
    </div><!-- /view -->
    <div class="nav">
        <div class="item"><span>1</span></div>
        <div class="item"><span>2</span></div>
        <div class="item"><span>3</span></div>
    </div><!-- /nav -->
</div><!-- /slide -->
<p><a href="https://github.com/s-hiroshi/slide">GitHub</a></p>

CSS

.view {
    overflow: hidden;
}
.view .item{
    display: none;
}
.view .active {
    display: block;
}
.slide .nav {
    overflow: hidden;
    clear: both;
    margin: 5px 0 10px;
}
.slide .nav .item {
    overflow: hidden;
    /* zoom: 1; for IE */
    border: 1px solid #e1dece;
    float: left;
    margin: 0 5px 0 0;
    width: 24px;
    height: 24px;
    color: #554d31;
    text-align: center;
    cursor: pointer;
}
.item span {
    line-height: 24px;
    vertical-align: middle;
}
div.tmpSlideshowControlOn {
    color: #FFFFFF;
    background: #DDDDDD;
}
.mouseover {
    border: 1px solid #666666;
    color: #000000;
    background: #FF0000;
}

JavaScript

/**
* scrollslide
* http://www.info-town.jp
*
* Copyright (c) 2012 "Info Town" Sawai Hiroshi
* Licensed under the MIT license.
*/

/* global object is jQuery */
jQuery.fn.slide = function() {
    var view = [],
        viewitem = [],
        nav = [],
        navitem = [];

    $(this).each(function(i) {
        view[i] = $('.view', $(this));
        viewitem[i] = $('.item', view[i]);
        nav[i] = $('.nav', $(this));
        navitem[i] = $('.item', nav[i]);

        // clickイベント
        $(navitem[i]).each(function(j) {
            $(navitem[i][j]).click(function() {
                var k = 0;
                for (k = 0; k < navitem[i].length; k++) {
                    $(viewitem[i][k]).removeClass('active');
                }
                $(viewitem[i][j]).addClass('active');
                $(viewitem[i][j]).css({
                    'width': '20px',
                    'opacity': '0.1'
                });
                $(viewitem[i][j]).animate({
                    width: "100%",
                    opacity: "1.0"
                }, {
                    duration: "slow"
                });
            });
        });

        // hover
        $(navitem[i]).each(function(j) {
            $(navitem[i][j]).hover(function() {
                $(this).addClass('mouseover');
            }, function() {
                $(this).removeClass('mouseover');
            });
        });

    });

    return this;
};

jQuery(function() {
    $('.slide').slide();
});