jquery plugin Picture List switch, click on the small figure list large image display

The effect can be directly used, but not yet packaged, such as packaging convenient plug-in download.

The code is as follows

Copy Code

&lt;html&gt;&lt;head&gt; &lt;title&gt; Tencent Entertainment Image preview of the site special effects, has been resolved and optimized to facilitate understanding of its HTML CSS principles. &lt;/title&gt; &lt;meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "&gt; &lt;style type= "Text/css" &gt; body,ul,li,ol{list-style:none;padding:0px;margin:0px;} . p27{ width:640px; height:1000px; Overflow:hidden; margin:50px Auto; } . p27list{ Float:left; border-top:1px solid #E0E0E0; border-bottom:1px solid #E0E0E0; position:relative; } . p27lcontainer{ width:631px; height:70px; Overflow:hidden; Background: #F2F2F2; border-top:1px solid white; border-bottom:1px solid white; } . p27lcontent{ width:10000px; position:relative; top:2px; } . p27lcol{ Float:left; width:80px; height:60px; Overflow:hidden; margin:0px 0 0 4px; BORDER:3PX solid #F2F2F2; Background: #F2F2F2; Text-align:center; } . P27lcol img{ height:100%; } . p27lcact{ BORDER:3PX solid #2D96E9; Background:white; } . p27lleft,.p27lright{ Position:absolute; top:25px; height:20px; width:20px; Background:black; opacity:0.5; Cursor:pointer; } . p27lleft{ left:7px; } . p27lright{ right:7px; } . p27big{ Float:left; width:100%; position:relative; } . p27bimg{ width:100%; Text-align:center; } /* The Left and right buttons on the picture . p27bleft,.p27bright{ Display:block; width:50%; height:100%; Position:absolute; Z-index:2; top:0px; } . p27bleft{ left:0; } . p27bright{ right:0; background:-30px 50px; } . P27bleft Span,.p27bright span{ Position:absolute; top:50%; margin-top:-22px; width:24px; height:43px; Background:url (./p27/s_gallery_2012110702.png) 0-50px; Display:none; } . P27bleft span{ left:10px; } . P27bright span{ right:10px; background-position:-30px-50px; } . P27bleft:hover Span,.p27bright:hover span{ Display:inline-block; } . P27bshop a:hover{ opacity:0.8; } . p27msg{ width:100%; height:30px; line-height:30px; Background:black; opacity:0.6; Position:absolute; top:0px; left:0px; Z-index:3; } . p27bshop{ width:160px; height:30px; Background:rgba (0, 0, 0, 0.2); border:1px solid #C5B9B6; Position:absolute; bottom:10px; left:50%; margin-left:-80px; Z-index:4; } . p27bsnum{ Float:left; width:80px; height:30px; line-height:30px; Color:white; Text-align:center; } . P27bsleft,. P27bsauto,. p27bsright{ width:10px; height:20px; Display:block; Float:left; Background:url (./p27/s_gallery_2012110702.png); margin:5px 10px 0 0; opacity:0.6; } . p27bsauto{ width:20px; Background:url (./p27/g_btn_play.png); } . p27bsright{ BACKGROUND-POSITION:-16PX 0; } . P27bshop a:hover{ opacity:0.8; } /* Detailed * * . p27_xx{ width:100%; height:100%; Position:absolute; left:0px; top:0px; Z-index:5; Display:none; } . p27_bg{ width:100%; height:100%; Background:black; opacity:0.8; Position:absolute; top:0px; left:0px; Z-index:1; } /* Detailed bottom operation part * * . p27_xx_shop{ width:100%; height:110px; Position:absolute; left:0px; bottom:-82px; Z-index:5; } . p27_xx_title{ width:100%; height:27px; border-bottom:2px solid #232323; Text-align:center; } . P27_xx_title span{ Display:inline-block; width:82px; height:29px; line-height:29px; Text-align:center; Background:url (./p27/mask_count.png); Color:white; font-size:12px; } . P27_xx_title span i{ Font-style:normal; font-size:18px; Color: #0A96D0; } /* Detailed interface button area of the bottom operation section * * . p27_xx_container{ height:80px; width:100%; Background: #000000; padding-top:10px; } . p27_xx_btnleft,.p27_xx_btnright{ Position:absolute; width:50%; height:100%; Z-index:2; Background:; } . p27_xx_btnleft{ left:0px; } . p27_xx_btnright{ right:0px; } . P27_xx_btnleft Span,.p27_xx_btnright span{ Display:inline-block; width:47px; height:93px; Background:url (./p27/s_gallery_2012110702.png) 0-96px; Position:absolute; top:50%; margin-top:-46px; } . P27_xx_btnleft span{ left:5%; } . P27_xx_btnright span{ Background-position:0 -196px; right:5%; } . p27_xx_colse{ width:54px; height:54px; Background:url (./p27/s_gallery_2012110702.png) 0-294px; Display:inline-block; Position:absolute; Z-index:5; right:20px; top:20px; } . p27_xx_colse:hover{ Background:url (./p27/close1.png); } /* Detailed Large Map * * . p27_xx_image{ Width:auto; Height:auto; Position:absolute; Z-index:4; Overflow:hidden; } . P27_xx_image img{ border:5px solid white; border-bottom:0px; } * * The text below the big picture . p27_xx_imsg{ width:100%; height:30px; line-height:30px; Display:inline-block; Background:white; } . p27_xx_imsg a{ font-size:12px; Color:black; Float:right; Text-decoration:none; margin-right:10px; } /* Full Screen Bottom button area * * . p27_xx_content{ width:10000px; height:100%; position:relative; } . p27_xx_items{ Float:left; width:80px; height:60px; background:red; Overflow:hidden; margin-left:4px; BORDER:3PX solid #000; Text-align:center; Background:black; } . P27_xx_items img{ height:100%; opacity:0.6; } . p27_xx_act{ Border-color: #2D96E9; Background:white; } . p27_xx_act Img,.p27_xx_items:hover img{ Opacity:1; }    /* Detailed Large image description */    .p27_xx_msg{     width:100%;     height:30px;     text-align:center;     position:absolute;     left:0px;     top:0px;     z-index:1;     color:white;     font-size:14px;    }    /* the left and right buttons on the detailed picture */    .p27_xx_ileft,.p27_xx_iright{      width:50%;     position:absolute;     height:100%;     top:0px;     z-index:2;    }    .p27_xx_ileft{     cursor:url (./p27/arr_left.cur), auto;      left:0px;    }    .p27_xx_iright{     cursor:url (./p27/arr_right.cur), auto;     right:0px;    }    .p27_xx_ileft:hover,.p27_xx_iright:hover{     text-decoration: underline;     color:white;    }    a:focus {     outline:medium none;    } /* Auto Play button * * . p27_xx_auto,.p27_xx_stop{ Position:absolute; top:10px; right:10px; Display:inline-block; width:20px; height:20px; Background:url (./p27/g_btn_play.png); Z-index:3; } . p27_xx_stop{ Display:none; Background:url (./p27/pause1.png) No-repeat Center; } . p27_xx_auto:hover,.p27_xx_stop:hover{ opacity:0.8; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class= "P27" &gt; &lt;div class= "P27list" &gt; &lt;div class= "P27lcontainer" &gt; &lt;ul style= "left: -360px;" class= "P27lcontent" &gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/1.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/2.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/3.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/4.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/5.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/6.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/7.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol p27lcact" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/8.jpg" alt= "" &gt;&lt;/a&gt;&lt;/ Li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/9.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/10.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/11.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/12.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/13.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class= "P27lcol" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/14.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class= "P27lleft" &gt;&lt;/div&gt; &lt;div class= "P27lright" &gt;&lt;/div&gt; &lt;/div&gt; &lt;div class= "P27big" &gt; &lt;div class= "p27bimg" &gt;&lt;img style= "width:100%" src= "1_files/8.jpg" "&gt;&lt;/div&gt; &lt;a class= "P27bleft" href= "#" title= "" &gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt; &lt;a class= "P27bright" href= "#" title= "" &gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt; &lt;div class= "P27bshop" &gt; &lt;span class= "P27bsnum" &gt;7/19&lt;/span&gt; &lt;a class= "P27bsleft" href= "#" &gt;&lt;/a&gt; &lt;a class= "P27bsauto" href= "#" &gt;&lt;/a&gt; &lt;a class= "P27bsright" href= "#" &gt;&lt;/a&gt; &lt;/div&gt; &lt;div class= "P27msg" &gt;&lt;/div&gt; &lt;/div&gt; &lt;div class= "P27_xx" &gt; &lt;div class= "P27_BG" &gt;&lt;/div&gt; &lt;div class= "P27_xx_shop" &gt; &lt;div class= "P27_xx_title" &gt;&lt;span&gt;&lt;i&gt;1&lt;/i&gt;/2&lt;/span&gt;&lt;/div&gt; &lt;div class= "P27_xx_container" &gt; &lt;ul class= "P27_xx_content" &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/1.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/2.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items p27_xx_act" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/3.jpg" alt= "" &gt;&lt;/a &gt;&lt;/li&gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/4.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/5.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/6.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/7.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/8.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/9.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/10.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/11.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/12.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/13.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;li class= "P27_xx_items" &gt;&lt;a href= "#" title= "" &gt;&lt;img src= "1_files/14.jpg" alt= "" &gt;&lt;/a&gt;&lt;/li &gt; &lt;/ul&gt; &lt;div class= "P27_xx_left" &gt;&lt;/div&gt; &lt;div class= "P27_xx_right" &gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "P27_xx_aea" &gt; &lt;div class= "P27_xx_image" &gt; &lt;img src= "1_files/1.jpg" alt= "" &gt; &lt;a class= "P27_xx_ileft" href= "#" title= "" &gt;&lt;/a&gt; &lt;a class= "P27_xx_iright" href= "#" title= "" &gt;&lt;/a&gt; &lt;a class= "P27_xx_auto" href= "#" title= "" &gt;&lt;/a&gt; &lt;a class= "P27_xx_stop" href= "#" title= "" &gt;&lt;/a&gt; &lt;span class= "p27_xx_imsg" &gt;&lt;a href= "#" title= "" &gt; Thank you for your attention &lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class= "p27_xx_msg" &gt; Description ...&lt;/div&gt; &lt;/div&gt; &lt;a class= "P27_xx_btnleft" href= "#" title= "" &gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt; &lt;a class= "P27_xx_btnright" href= "#" title= "" &gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt; &lt;a class= "P27_xx_colse" href= "#" title= "" &gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; <script type= "Text/javascript" src= "1_files/jquery-1.js" ></script> <script type= "Text/javascript" > var btn=$ ('. P27lcol '), ne=0; Default small picture button hook event $ ('. P27lcol '). Click (function () { ne=$ (This). index (); var n=ne, lef=0; Get width parameter var kuan=$ (this). Width () +10, Zong=btn.length*kuan-$ ('. P27lcontainer '). width (); Modify a small picture button style Btn.removeclass (' p27lcact '); $ (this). addclass (' p27lcact '); Get move Distance lef= (n-3) * (Kuan); The left-most-right judgment if (n <= 3) lef=0; if (Lef>=zong) lef=zong+4; Perform scrolling $ ('. P27lcontent '). Stop (true). Animate ({left:-lef}); To modify a large map path $ ('. p27bimg img '). attr (' src ', $ (this). FIND (' img '). attr (' src ')); if ($ ('. p27bimg img '). Width () > $ ('. P27bimg '). Width ()) $ ('. p27bimg img '). CSS ({width: ' 100% '}); ). EQ (0). Click (); Default style hook left and right button events $ ('. P27lleft '). Click (function () { Ne-=1; if (ne<0) ne=0; Btn.eq (NE). Click (); }); $ ('. P27lright '). Click (function () { Ne+=1; if (ne>=btn.length) ne=btn.length-1; Btn.eq (NE). Click (); }); $ ('. P27bright '). Click (function () { $ ('. P27lright '). Click (); }); $ ('. P27bleft '). Click (function () { $ ('. P27lleft '). Click (); }); $('. P27bsright '). Click (function () { $ ('. P27lright '). Click (); }); $('. P27bsleft '). Click (function () { $ ('. P27lleft '). Click (); }); Detailed button click event var xbtn=$ ('. P27_xx_items '); Xbtn.click (function () { Zidong (); ne=$ (This). index (); Get Picture Path var dizhi=$ (this). FIND (' img '). attr (' src '); Gets the width parameter 15 is the value of Margin-left + border var kuai=$ (this). Width () +10, Zong=xbtn.length*kuai-$ ('. P27_xx_container '). width (); Modify a small picture button style Xbtn.removeclass (' p27_xx_act '); $ (this). addclass (' p27_xx_act '); var num=parseint (('. P27_xx_container '). Width ()/kuai)); Get move Distance lef= (NE-NUM/2) *kuai; The left-most-right judgment if (lef<0) lef=0; Perform scrolling $ ('. P27_xx_content '). Stop (true). Animate ({left:-lef}); To modify a large map path $ ('. P27_xx_image img '). attr (' src ', dizhi); Daxiao (); Modify current serial number information $ ('. P27_xx_title span '). HTML (' <i> ' + (ne+1) + ' </i>/' +btn.length); });   //compute Large Figure location   function Daxiao () {    var ww=$ (window). Width (),     wh=$ ('. P27_xx '). Height (),     xx=$ ('. P27_xx_shop ');   &NBSP;&NBSP    var are=$ ('. P27_xx_image '),     img=$ ('. p27_Xx_Image IMG ');          var he=wh-xx.height (),      jj=160;  //and        //Restore the default dimensions of the picture and hide the     img.css ({opacity:0,width: ' auto ', Height: ' auto '});        //If the default height of the picture exceeds the height of the window + gap, reduce the height by    if (are.height) > Wh-jj) img.height (WH-JJ);        //Get the gap between the picture and the top of the window    var tp= (Wh-are.height ())/2; To modify the location of a large map $ ('. P27_xx_image '). CSS ({top:tp,left: (Ww-img.width ())/2}); Refresh Large image description location $ ('. P27_xx_msg '). CSS ({top:tp+are.height () +10}); Refresh large picture Box width 9 is the border width Are.width ($ ('. P27_xx_image img '). Width () +9); Show pictures Img.css ({opacity:1}); } Detail interface Button hook up $ ('. P27_xx_ileft '). Click (function () { Ne-=1; if (ne<0) ne=0; Xbtn.eq (NE). Click (); }); $ ('. P27_xx_iright '). Click (function () { Ne+=1; if (ne>=btn.length) ne=btn.length-1; Xbtn.eq (NE). Click (); }); $ ('. P27_xx_btnleft '). Click (function () { $ ('. P27_xx_ileft '). Click (); }); $ ('. P27_xx_btnright '). Click (function () { $ ('. P27_xx_iright '). Click (); }); Activate the display button $ ('. P27_xx_shop '). Hover (function () { Cleartimeout (m); $ (this). Stop (true). Animate ({bottom:0}); },function () { Yincang (); }); Delay Execution Hide Bottom button area var m; function Yinca

Special Effects Description:

1, pictures and texts mixed row of the picture list;

2, the Picture Full screen view, and the automatic playback;

3, each line of code marked with comments, to facilitate the expectation of learning HTML CSS structure and JS principles of the students.

Because there is no encapsulation, temporarily only see the effect of viewing and learning, and so on recently packaged, and then recommended to use.