jQueryを使ったシンプルな画像切り替えスクリプト : JavaScript

Pocket

クリックで画像を切り替えるシンプルなスクリプト

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>simple slide sho</title>
        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/slide.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script>
            jQuery(function($) {
                $('.slide').slide();
            });
        </script>
    </head>
    <body><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 -->

    </body>
</html>

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(); }); [/javascript] [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; } [/css]

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 


人気記事 はてなブックマーク

この日記のはてなブックマーク数