CSS+JSで画像コレクションを実現display_html/css_WEB-ITnose

まず、達成される効果について説明します:

1. 画像の表示とページめくり

2. 画像をクリックすると画像が拡大されます。

達成される効果は次のとおりです:

初期化と最初の

中央の写真

最後の写真

クリックすると画像が拡大します 詳細情報付き

実装内容は非常にシンプルで、通常の画像表示方法です。私の実装アイデアについて話しましょう。

1. 画像表示とページめくり

a. 画像表示

画像表示は タグによって実装されます:

ページめくり

ページめくりは updateImage 関数によって実装されます、渡されるパラメータは type で、操作中に「前」または「次」を決定するため、updateImage 関数は次のようになります:

<div>    <div>        <div id="prev" onclick="updateImage('prev')"></div>        <a id="img1" onclick="showImg(1)">            <img class="thumb-img lazy" src="/static/imghwm/default1.png" data-src="img/demopage/thumb-1.jpg"    style="max-width:90%"  style="max-width:90%" alt="">        </a>        <a class="thumb-a thumb-a-hide" onclick="showImg(2)">            <img class="thumb-img lazy" src="/static/imghwm/default1.png" data-src="img/demopage/thumb-2.jpg"    style="max-width:90%"  style="max-width:90%" alt="">        </a>        <a class="thumb-a thumb-a-hide" onclick="showImg(3)">            <img class="thumb-img lazy" src="/static/imghwm/default1.png" data-src="img/demopage/thumb-3.jpg"    style="max-width:90%"  style="max-width:90%" alt="">        </a>        <div id="next"></div>    </div>
</div>

関数では、imgIndex は現在表示されている画像の番号を記録します。

①.操作の種類を決定し、操作後の画像の番号を設定します。

②、ループ内にサム・ア・ハイド・スタイルを追加し、すべての画像を非表示にし、画像番号imgIndexでサム・ア・ハイド・スタイルを削除し、画像を表示します。

③、表示と非表示を判断します。 imgIndex に基づく操作ボタンの設定。

2. クリックして画像の詳細と情報を表示します

この効果は showImg 関数によって実現されます。 showImg の具体的な内容は次のとおりです:

        function updateImage(type){            if(type==="prev"){                if(imgIndex>1){                    imgIndex=imgIndex-1;                }            }            else{                if(imgIndex  上記のコードは次のような HTML コードを生成します。 <br> <p></p> <pre name="code" class="sycode">        function showImg(index){            var width=600,height=400;            var winWidth = $(window).width(),winHeight = $(window).height();            var modalBg = $("<div></div>");            modalBg.addClass("modal-bg");            modalBg.appendTo($('body'));            var modal = $("<div></div>");            modal.addClass("modal");            modal.css("position","absolute")                 .css("top",(winHeight-height)/2+"px")                 .css("left",(winWidth-width)/2+"px");            var titleTipsBg = $("<div></div>").addClass("tips-bg");            var titleTips = $("<a></a>").addClass("tips").html("I am a Chinese.");            var titleClose =  $("<a></a>").addClass("close");            var title = $("<div></div>");            title.addClass("title");            title.append(titleTipsBg)                 .append(titleTips)                 .append(titleClose);            titleClose.on("click",function(){                modalBg.hide();                modal.hide();            });            title.appendTo(modal);            var img = $("<img  alt="CSS+JSで画像コレクションを実現display_html/css_WEB-ITnose" >").attr("width",width)                                 .attr("height",height)                                 .attr("src","img/demopage/image-"+index+".jpg");            var imgDiv = $("<div></div>").append(img);            imgDiv.appendTo(modal);            modal.appendTo($('body'));        }

実際に作成する 拡大画像を表示するためのモーダルレイヤーを作成します。

に関わる CSS スタイルの内容

QQ: 1004740957

Email: niujp08@qq.com