CSS+JS realization Picture Set Show (ii)

The topic and the above two articles have the repetition, but the content and the above two articles have the difference, in this article, realizes the picture set to display the effect is:

1, detailed drawings and thumbnails of the synchronous display;

2, the image of the automatic playback;

3, display the image of the thumbnail of the focus of the display and other images of the cover display;

4. Move the mouse to the detail display picture control control.

Specific as follows:

Initialize or First state

Intermediate state

Last state

This way the picture shows general use of the picture news or similar things more common, such as the Baidu homepage of the news is a similar way to show, as follows:

Baidu Home News

The code I implemented below is posted for your reference.

1, Showimg.css

HTML, body{height:100%;    margin:0;    padding:0; Text-align:center;}    #prev {position:absolute;    top:125px;    left:0px;    width:45px;    height:50px; Background:url (.. /img/prev.png);}    #next {position:absolute;    top:125px;    right:0px;    width:45px;    height:50px; Background:url (.. /img/next.png);} #prev: Hover, #next: hover{cursor:pointer;}.    detail-div{position:relative;    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-div{Position:absolute;    Bottom: -110px;    left:4px; Background: #555;}.    thumb{margin-left:7px;    margin-top:5px; Margin-bottom:5px;    Float:left; Position:relative;}.    thumb-img{-webkit-border-radius:5px;    -moz-border-radius:5px;    -ms-border-radius:5px;    -o-border-radius:5px;    border-radius:5px}.thumb-active{border:2px solid #fff;    -webkit-border-radius:5px;    -moz-border-radius:5px;    -ms-border-radius:5px;    -o-border-radius:5px;    border-radius:5px; height:100px;}.    thumb-modal{background: #141414;    opacity:0.5;    Filter:alpha (OPACITY=50);    Position:absolute;    left:0px;    bottom:2px;    -webkit-border-radius:5px;    -moz-border-radius:5px;    -ms-border-radius:5px;    -o-border-radius:5px; border-radius:5px;}. thumb-modal-hide{Display:none;}

2, Juqery.showimg.js

(function ($) {$.fn.showimg = function (options) {var defaults = {};        var options = $.extend (defaults, options);        var container=$ (this);        var imgurls = Options.imgurls;        var width = Options.width,height = Options.height,thumbheight = Options.thumbheight;        var autoPlay = Options.autoplay;        Container.css ("width", width+ "px");        var imgindex = 1,length = Imgurls.length;        var play; /** * Picture Details */var Detaildiv = $ ("<div></div>"). AddClass ("Detail-div"). AppendTo (Containe        R);        var Ctrldiv = $ ("<div></div>"). AppendTo (Detaildiv). Hide (); var PrevA = $ ("<a></a>"). attr ("id", "prev"). AppendTo (Ctrldiv). Hide (), Nexta = $ ("<a></a>        "). attr (" id "," Next "). AppendTo (Ctrldiv);            $ (". Detail-div"). Live ("MouseEnter", function () {play = Clearinterval (play);        Ctrldiv.show ();        }); $ (". Detail-div"). Live ("MouseLeave", function () {           Play = SetInterval (playimg,3000);        Ctrldiv.hide ();        });        var Detailimga = $ ("<a></a>"). AppendTo (Detaildiv); var detailimg = $ ("</div>"). AddClass ("Thumb-div"). Appendt        O (Container). CSS ("width", width+ "px");        Addthumbimgs ();        Preva.on ("click", Function () {Imgctrlfun ("prev");        });        Nexta.on ("click", Function () {Imgctrlfun ("next");        });        if (autoPlay) {play = SetInterval (playimg,3000);            } function Playimg () {if (imgindex===length) {imgindex=0;        } nexta.click ();    }/** * Picture control * @param type     */function Imgctrlfun (type) {if (type=== "prev") {if (imgindex>1) {                Imgindex= imgIndex-1;                }} else{if (imgindex<length) {imgindex= imgindex+1;            }} $ ("#detailImg"). attr ("src", "img/demopage/image-" +imgindex+ ". jpg");            Thumbdiv.html ("");            Addthumbimgs ();            if (imgindex===length) {$ ("#next"). Hide ();            } else{$ ("#next"). Show ();            } if (Imgindex===1) {$ ("#prev"). Hide ();            } else{$ ("#prev"). Show ();        }        };            /** * Add image Miniature */function Addthumbimgs () {var thumbwidth = width/3-10; for (Var i=imgindex-2;i</div>"). AddClass ("thumb"). Appen        DTo (THUMBDIV);        var Thumbmodaldiv = $ ("<div></div>"). AddClass ("Thumb-modal"). AppendTo (thumb);                Thumbmodaldiv.css ("height", thumbheight+ "px"). CSS ("width", thumbwidth+ "px");                    var thumbimg = $ ("
3, index.html
<! DOCTYPE html>
The idea is very simple, I believe that we have read the code to know what the train of thought, I hope that everyone has helped, a source.

If you have any questions, please contact:
qq:1004740957
Emai:[email protected]
CSS+JS realization Picture Set Show (ii)