画像マーキー効果を実現するネイティブJS

今日は、ネイティブ JS で実装された画像マーキー効果を紹介します。効果は次のとおりです。

実装されたコードは以下のとおりです。コピーして貼り付けてご利用ください。

<!DOCTYPE html>
<html>
 
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
    <title>画像マーキー効果を実現するネイティブ JS</title>
 
    <スタイル タイプ="text/css">
        * {
            パディング: 0;
            マージン: 0;
        }
 
        li {
            リストスタイル: なし;
        }
 
        画像 {
            境界線: なし;
        }
 
        体 {
            背景: #eee;
        }
 
        .スライドモジュール{
            幅: 120ピクセル;
            高さ: 400px;
            マージン: 0 自動;
            背景: #fff;
            境界線: 1px 実線 #ccc;
            位置: 相対的;
            上: 50px;
        }
 
        .スライドモジュール.up {
            幅: 27px;
            高さ: 27px;
            /* 上矢印 */
            背景: url(images/0.gif) 繰り返しなし;
            位置: 絶対;
            上: 4px;
            左: 50%;
            左マージン: -16px;
            カーソル: ポインタ;
            フィルター: アルファ(不透明度=60);
            不透明度: 0.6;
        }
 
        .スライドモジュール.down {
            幅: 27px;
            高さ: 27px;
            /* 下矢印 */
            背景: url(images/5.gif) 繰り返しなし;
            位置: 絶対;
            下: 4px;
            左: 50%;
            左マージン: -16px;
            カーソル: ポインタ;
            フィルター: アルファ(不透明度=60);
            不透明度: 0.6;
        }
 
        .スライドモジュール.ラップ{
            幅: 120ピクセル;
            高さ: 330ピクセル;
            位置: 絶対;
            上: 35px;
            左: 0;
            オーバーフロー: 非表示;
        }
 
        .スライドモジュールul {
            幅: 120ピクセル;
            位置: 絶対;
            上: 0;
            左: 0;
        }
 
        .slide-module li {
            幅: 120ピクセル;
            高さ: 110px;
            フロート: 左;
        }
 
        .スライドモジュールa {
            表示: ブロック;
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線の赤;
            マージン: 0 自動;
            位置: 相対的;
            上: 4px;
        }
 
        .slide-module a:hover {
            境界線: 1px 実線 #333;
        }
 
        .スライドモジュール.アクティブ{
            境界線: 10px 実線 #000;
        }
    </スタイル>
    <script type="text/javascript">
 
        window.onload = 関数（）{
            miaovスライド('miaovスライド');
        };
 
        関数 miaovSlide(o) {
            //操作オブジェクト コンテナーを取得します。var obj = document.getElementById(o);
            (!obj) の場合、戻り値:
            //オブジェクトの下のすべてのdivを取得します
            var aDiv = obj.getElementsByTagName('div');
            //上矢印を取得します var oUp = getClass('up');
            //下矢印を取得します var oDown = getClass('down');
            //画像コンテナを取得します。var oWrap = getClass('wrap');
            //画像リストを取得します var oUl = oWrap.getElementsByTagName('ul')[0];
            //画像リスト項目を取得します var oLi = oUl.getElementsByTagName('li');
 
            var oTime = null;
            var iMs = 30;
            var i = 0;
            var iNum = 5;
            var トグル = -1;
 
            oUl.innerHTML += oUl.innerHTML;
 
            // 上をクリックすると上に移動します oUp.onclick = function () {
 
                トグル = -1;
 
                自動再生(トグル);
            };
 
            // 下をクリックすると、前方に移動します oDown.onclick = function () {
                トグル = 1;
                自動再生(トグル);
            };
 
            // 上下矢印が動かされたら、透明度を 1 に変更します
            oUp.onmouseover = oDown.onmouseover = 関数 () {
                this.style.filter = 'alpha(不透明度:100)';
                this.style.opacity = 1;
            };
 
            // 上下矢印が内側に移動したら、透明度を 0.6 に変更します
            oUp.onmouseout = oDown.onmouseout = 関数 () {
                this.style.filter = 'alpha(不透明度:60)';
                this.style.opacity = 0.6;
            };
 
            // 画像の移動方法、toggleは下方向または上方向の値を表します function autoPlay(toggle) {
                // 元のタイマーをクリアする if (oTime) {
                    間隔をクリアします(oTime);
                }
                // タイマーを再開する oTime = setInterval(function () {
                    // 2 番目の増分 iNum += 2 * Toggle;
                    // UL は、上の値が 0 より大きい場合に下がります if (iNum > 0) {
                        // 上の値を負の UL 高さの半分に設定します (プルアップ)
                        iNum = -oLi.length * oLi[0].offsetHeight / 2;
                    }
                    // UL は、上端値の絶対値が UL 自身の幅の半分より大きい場合に上がります。if (Math.abs(iNum) > oLi.length * oLi[0].offsetHeight / 2) {
                        // 上の値を 0 に設定 (プルダウン)
                        数値 = 0;
                    }
                    // 上部の値を割り当てる oUl.style.top = iNum + 'px';
 
                }, iMs);
            };
 
            自動再生(トグル);
 
            // 現在のスタイルを持つ要素を取得する function getClass(sName) {
                (i = 0; i < aDiv.length; i++) の場合 {
                    (aDiv[i].className == sName)の場合{
                        aDiv[i]を返します。
                    }
                }
            }
        }
 
    </スクリプト>
</head>
 
<本文>
 
    <div class="slide-module" id="miaovSlide">
        <!-- 上矢印 -->
        <div class="up"></div>
        <div class="wrap">
            <ul>
                <li>
                    <あ>
                        <img src="images/1.jpg" />
                    </a>
                </li>
                <li>
                    <あ>
                        <img src="images/2.jpg" />
                    </a>
                </li>
                <li>
                    <あ>
                        <img src="images/3.jpg" />
                    </a>
                </li>
                <li>
                    <あ>
                        <img src="images/4.jpg" />
                    </a>
                </li>
            </ul>
        </div>
        <!-- 下矢印 -->
        <div class="down"></div>
    </div>
 
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: