News portal Atlas album JS Code

The news website jquery Atlas album code, support keyboard Direction key switch, support Click the picture left and right area switch, support automatic carousel, with thumbnail image. As follows:

Online preview Source Download

The implemented code.

HTML code:

 <div class= "Pic-head" > <div class= "picheard-title" > <span class= "spanleftpic L" ><a href= "http://www.w2bc.com/" > Caidian net </a><label>></label><a href= "/" > Xiang che beauty </a&gt ;<label>></label> Purple Sky under the yellow Gallardo with </span><a href= "/" > Purple sky under the yellow Gallardo with sexy beauties of Night seduction </a>< Font> (<i id= "Viewnum" &GT;1&LT;/I&GT;/10) </font><span class= "Spanrightpic r" ><a HRE f= "/" > Back to Xiang che beauty home </a></span> </div> </div> <div class= "Indexbody" > <d IV class= "Btn-float" > <a class= "maxbtn-l" href= "javascript:void (0);" ></a><a class= "Maxbtn-r" href= "javascript:void (0);" > </a> </div> <div class= "Indexbody-main" > <div class= "Indexbo Dy-left "> </div> <div class=" Indexbody-right "> </div> </di     V>   <div class= "Demo w990" > <div class= "Maxpic-box" > <div class= "Maxpic" > <div class= "Maxpicbox" > <span></span> <im            G id= "Mainpic" src= "images/bigpic/1.jpg"/></div> </div> </div> <div class= "Pic-pageln" > <span class= "L" > available "<font>←</font>" or "<font>→</font > "Arrow key quick Flip </span> <span class=" Pic-r-span r "> <a href=" javascript:void (0); "class=" ico "Id=" stop-on "><i class=" ins1 "></i> paused </a> <a id=" showoriginal "target=" _blan K "href=" images/bigpic/1.jpg "class=" ico02 "><i></i> View original </a> <a href=" http: Www.sucaijiayuan.com "class=" ico03 "><i></i> download </a><a href=" "class=" IC O04 "><i></i> share </a> <a href= "http://www.sucaijiayuan.com" class= "ico05" ><i></i>                Back to Atlas </a> </span> </div> <div id= "tplist" class= "W-width clearfix" > <div class= "Up-tuzu" > <!--<a class= "outpic" href= "/" id= "Prevurl" ><span>& Lt;/span></a> <a class= "inpic" href= "/" > previous Group </a><span C                    lass= "Prevspan" ></span>--> </div> <div class= "Bottom-lists L" > <div class= "Picbtn-a picbtn-a-l" > <a class= "picbtn-left" href= "Javascript:vo ID (0); " ></a> </div> <div class= "Minpic L" > < UL class= "gallery_demo_unstyled" > <li id= "tu_1" ><span></span><a href= "J Avascript:void (0);"                            > </a></li> <li id= "tu_2" ><span></span><a href= "javascript:void (0);"                            > </a></li> <li id= "Tu_3" ><span></span><a href= "javascript:void (0);"                            > </a></li> <li id= "Tu_4" ><span></span><a href= "javascript:void (0);"                            > </a></li> <li id= "tu_5" ><span></span><a href= "javascript:void (0);"                            > </a></li> <li id= "Tu_6" ><span></span><a href= "JavAscript:void (0); "                            > </a></li> <li id= "tu_7" ><span></span><a href= "javascript:void (0);"                            > </a></li> <li id= "Tu_8" ><span></span><a href= "javascript:void (0);"                            > </a></li> <li id= "Tu_9" ><span></span><a href= "javascript:void (0);"                            > </a></li> <li id= "tu_10" ><span></span><a href= "javascript:void (0);"                        > </a></li>    </ul> </div>                <div class= "Picbtn-a picbtn-a-r" > <a class= "picbtn-right" href= "javascript : void (0); "                    ></a> </div> </div> <div class= "Next-tuzu" > <!--<a class= "outpic" href= "/" id= "Nexturl" ><span></span></a> <a class=" inpic "href="/"> Next group </a> <span class=" Nextspan "></span&gt ;--> </div> </div> </div> </div> <div class= "bottom-f            Ooter "> <div class=" bfooterodiv w990 "> <p class=" bf-p "> What you might like </p>                        <div class= "bfooterodiv-img" > <ul> <li>                          <div class= "Bf-odiv" > <a target= "_blank" href= "http://www.w2bc.com" >      </a><span></span><a href= "/" class= "bf- ALink "> Yang Yaqi car models beauty sexy photo </a> </div> </li> < li> <div class= "Bf-odiv" > <a target= "_blank" href= "http://ww W.w2bc.com "> <a href= "/" class= "Bf-alink" > Yang Yaqi car models beauty sexy photo </a> </div>                            </li> <li> <div class= "Bf-odiv" > <a target= "_blank" href= "http://www.w2bc.com" > </a><span></span><a href="/"class=" Bf-alink "> 杨雅熙 car models beauty sexy photo </a> </div>                    </li> <li> <div class= "Bf-odiv" > <a target= "_blank" href= "http://www.w2bc.com" > </a><span></span><a href="/"class=" Bf-alink ">                        Yang Yaqi car models beauty sexy photo </a> </div> </li> <li> <div class= "Bf-odiv" > <a target= "_blank" href= "http://www.w2bc.com "> </a><span></spa N><a href= "/" class= "Bf-alink" > Yang Yaqi car models beauty sexy photo </a> </div> </ li> </ul> </div> </div> </div>

JS Code:

$(function () {            varPrevdiv = $ (". Up-tuzu "); varNextdiv = $ (". Next-tuzu "); if(Prevdiv.find ("a"). Length < 1) {prevdiv.html ("<p style= ' line-height:120px;color: #666; ' ><a href= ' id= ' Prevurl ' > No </a></p> "); }            if(Nextdiv.find ("a"). Length < 1) {nextdiv.html ("<p style= ' line-height:120px;color: #666; ' ><a href= ' id= ' Nexturl ' > No </a></p> ");        }        }); varSelectkey = "1"; varPiclist = [{            "Picpos": 1,            "pid": "1540637",            "Bigpic": "Images/bigpic/1.jpg",            "Bigpic": "Images/bigpic/1.jpg",            "Thumbpic": "Images/thumbpic/1.jpg"        },{    "Picpos": 2,    "pid": "1520876",    "Bigpic": "Images/bigpic/2.jpg",    "Bigpic": "Images/bigpic/2.jpg",    "Thumbpic": "Images/thumbpic/2.jpg"},{    "Picpos": 3,    "pid": "1520550",    "Bigpic": "Images/bigpic/3.jpg",    "Bigpic": "Images/bigpic/3.jpg",    "Thumbpic": "Images/thumbpic/3.jpg"},{    "Picpos": 4,    "pid": "1520549",    "Bigpic": "Images/bigpic/4.jpg",    "Bigpic": "Images/bigpic/4.jpg",    "Thumbpic": "Images/thumbpic/4.jpg"},{    "Picpos": 5,    "pid": "1520548",    "Bigpic": "Images/bigpic/5.jpg",    "Bigpic": "Images/bigpic/5.jpg",    "Thumbpic": "Images/thumbpic/5.jpg"},{    "Picpos": 6,    "pid": "1520547",    "Bigpic": "Images/bigpic/6.jpg",    "Bigpic": "Images/bigpic/6.jpg",    "Thumbpic": "Images/thumbpic/6.jpg"},{    "Picpos": 7,    "pid": "1520546",    "Bigpic": "Images/bigpic/7.jpg",    "Bigpic": "Images/bigpic/7.jpg",    "Thumbpic": "Images/thumbpic/7.jpg"},{    "Picpos": 8,    "pid": "1520545",    "Bigpic": "Images/bigpic/8.jpg",    "Bigpic": "Images/bigpic/8.jpg",    "Thumbpic": "Images/thumbpic/8.jpg"},{    "Picpos": 9,    "pid": "1520544",    "Bigpic": "Images/bigpic/9.jpg",    "Bigpic": "Images/bigpic/9.jpg",    "Thumbpic": "Images/thumbpic/9.jpg"},{    "Picpos": 10,    "pid": "1520543",    "Bigpic": "Images/bigpic/10.jpg",    "Bigpic": "Images/bigpic/10.jpg",    "Thumbpic": "Images/thumbpic/10.jpg"}];

via:http://www.w2bc.com/article/35148

News portal Atlas album JS Code