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

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

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

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

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

初期化と最初の

中央の写真

最後の写真

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

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

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

a. 画像表示

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

ページめくり

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

<div class="container">    <div class="image-list">        <div id="prev" onclick="updateImage('prev')"></div>        <a id="img1" class="thumb-a" onclick="showImg(1)">            <img class="thumb-img" width="200" height="150" src="img/demopage/thumb-1.jpg" alt="" />        </a>        <a  id="img2" class="thumb-a thumb-a-hide" onclick="showImg(2)">            <img class="thumb-img" width="200" height="150" src="img/demopage/thumb-2.jpg" alt="" />        </a>        <a  id="img3" class="thumb-a thumb-a-hide" onclick="showImg(3)">            <img class="thumb-img" width="200" height="150" src="img/demopage/thumb-3.jpg" alt="" />        </a>        <div id="next"  onclick="updateImage('next')"></div>    </div></div> 関数では、imgIndex は現在表示されている画像の番号を記録します。  </p>
<p> </p>①.操作の種類を決定し、操作後の画像の番号を設定します。 <p> </p>②、ループ内にサム・ア・ハイド・スタイルを追加し、すべての画像を非表示にし、画像番号imgIndexでサム・ア・ハイド・スタイルを削除し、画像を表示します。 <p> <br> </p>③、表示と非表示を判断します。 imgIndex に基づく操作ボタンの設定。 <p> </p>
<p> <br> </p>2. クリックして画像の詳細と情報を表示します <p> </p> この効果は showImg 関数によって実現されます。 showImg の具体的な内容は次のとおりです: <p> </p>
<p> </p>
<pre name="code" class="sycode">        function updateImage(type){            if(type==="prev"){                if(imgIndex>1){                    imgIndex=imgIndex-1;                }            }            else{                if(imgIndex<3){                    imgIndex=imgIndex+1;                }            }            for(var i=0;i<3;i++){                $("#img"+(i+1)).addClass("thumb-a-hide");            }            $("#img"+imgIndex).removeClass("thumb-a-hide");            if(imgIndex===3){                $("#next").hide();            }            else{                $("#next").show();            }            if(imgIndex===1){                $("#prev").hide();            }            else{                $("#prev").show();            }        };

上記のコードは次のような HTML コードを生成します。

        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>").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