CSS+JS Implementation Photo Gallery (cont.)

In the previous article, we realized the display of the picture set, in this article, the content of the previous article was encapsulated, the implementation of some optimization of the effect, the specific ideas I will not repeat, the following will be my code to paste out, for building reference.

1, Imglist.css

HTML, body,. modal-bg {height:100%;    margin:0;    padding:0;    font-size:13px;    Font-weight:bold; Color: #fff;}.    modal-bg{Position:absolute;    left:0px;    top:0px;    width:100%;    Background: #48525e;    opacity:0.4; Z-index:10;}.    modal{position:relative;    z-index:99;    Opacity:1;    top:15%;    left:40%;    width:600px; height:400px;}.    Modal. title. tips-bg{Position:absolute;    bottom:0px;    left:0px;    Background: #48525e;    width:100%;    height:50px; opacity:0.8;}.    Modal. title. tips{Position:absolute;    bottom:13px;    left:10px;    font-family: "Arial";    Font-weight:bold; font-size:20px;}. Modal. Title close{Background:url (..    /img/close.png) No-repeat;    width:27px;    height:27px;    Position:absolute;    top:5px; right:5px;}. Modal. Title close:hover{Cursor:pointer;}.    container{Position:absolute;    top:200px;    Text-align:center;    width:100%; Z-index:5;}.  image-list{  margin-left:40%; Position:relative;}    #prev {display:none;    width:45px;    height:50px; Background:url (.. /img/prev.png);}    #next {width:45px;    height:50px; Background:url (.. /img/next.png);} #prev: Hover, #next: hover{cursor:pointer;}.    page-num{Position:absolute;    right:8px;    bottom:15px;    border:2px solid #fff;    Font-weight:bold;    Background: #666666;    Color: #fff;    border-radius:15px;    Text-align:center;    padding:3px;    width:15px; font-size:13px;}.    thumb-a{Display:inline-block;    padding:4px; margin:0    0.5rem 1rem 0.5rem 1rem;    line-height:0;    -webkit-transition:background-color 0.1s ease-out;    -moz-transition:background-color 0.1s ease-out;    -o-transition:background-color 0.1s ease-out;    Transition:background-color 0.1s ease-out;    -webkit-border-radius:6px;    -moz-border-radius:6px;    -ms-border-radius:6px;    -o-border-radius:6px;    border-radius:6px}.thumb-a:hover{Background-color: #4ae; Cursor: pointer;}. thumb-a-hide{Display:none;}.    thumb-img{-webkit-border-radius:5px;    -moz-border-radius:5px;    -ms-border-radius:5px;    -o-border-radius:5px; BORDER-RADIUS:5PX}

2, Jquery.imglist.js

(function ($) {$.fn.imglist = function (options) {var defaults = {};        var options = $.extend (defaults, options);        var container=$ (this);        var imgurls = Options.imgurls;        var autoPlay = Options.autoplay; var thumbwidth = options.thumbwidth, Thumbheight = options.thumbheight, detailwidth = Options.detailwidth,detai        Lheight = Options.detailheight;        var length,imgindex=1;        length = Imgurls.length;        var play;        var imglist = $ ("<div></div>"). AddClass ("Image-list"). CSS ("width", thumbwidth+ "px");            $ (". Image-list"). Live ("MouseEnter", function () {play = Clearinterval (play);        Divctrl.show ();        });            $ (". Image-list"). Live ("MouseLeave", function () {play = SetInterval (playimg,3000);        Divctrl.hide ();        });        var divpagenum = $ ("<div></div>"). AddClass ("Page-num"). HTML (IMGINDEX);        Divpagenum.appendto (imglist); var Divctrl = $ ("&LT;div></div> "). CSS (" width "," 100% "). CSS (" height "," 100% "). Hide (); var Divprev = $ ("<div></div>"). attr ("id", "prev"), Divnext = $ ("<div></div>"). attr ("id",        "Next");        Divprev.css ("position", "absolute"), divnext.css ("position", "absolute");        Divprev.css ("Top", (thumbheight/2-25) + "px"), Divnext.css ("Top", (thumbheight/2-25) + "px");        Divprev.css ("left", " -10px"), Divnext.css ("Right", " -12px");            Divprev.on ("click", Function () {if (imgindex>1) {imgindex=imgindex-1;            } for (Var i=0;i<length;i++) {$ ("#img" + (i+1)). addclass ("Thumb-a-hide");            } $ ("#img" +imgindex). Removeclass ("Thumb-a-hide");            Divpagenum.html (Imgindex);            if (imgindex===length) {$ ("#next"). Hide ();            } else{$ ("#next"). Show (); if (imgindex===1) {$ ("#prev"). HIDE ();            } else{$ ("#prev"). Show ();        }        });            Divnext.on ("click", Function () {if (imgindex<length) {imgindex=imgindex+1;            } for (Var i=0;i<length;i++) {$ ("#img" + (i+1)). addclass ("Thumb-a-hide");            } $ ("#img" +imgindex). Removeclass ("Thumb-a-hide");            Divpagenum.html (Imgindex);            if (imgindex===length) {$ ("#next"). Hide ();            } else{$ ("#next"). Show ();            } if (Imgindex===1) {$ ("#prev"). Hide ();            } else{$ ("#prev"). Show ();        }        });        Divprev.appendto (Divctrl);        Divnext.appendto (Divctrl);        Divctrl.appendto (imglist);        Imglist.appendto (container);            for (var i= 0;i<length;i++) {var aimg = $ ("<a></a>"). attr ("id", "img" + (i+1)). addclass ("thumb-a"); Ifi>0) {aimg.addclass ("thumb-a-hide");            } var img = $ (" "). AddClass (" thumb-img ");            img. attr ("src", imgurls[i]);            Img.appendto (AIMG);            Aimg.appendto (imglist);                Aimg.on ("click", Function () {play = Clearinterval (play);                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-detailheight)/2+ "px"). CSS ("l                EFT ", (winwidth-detailwidth)/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 = $ ("</div>"). Append (IMG);                Imgdiv.appendto (modal);            Modal.appendto ($ (' body '));        });        } if (AutoPlay) {play = SetInterval (playimg,3000);  } function playimg () {          if (imgindex===length) {imgindex=0;        } divnext.click (); }}) (JQuery);

3, imglist.html

<! DOCTYPE html>
SOURCE download
CSS+JS Implementation Photo Gallery (cont.)