锘军!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 瑗垮畨浜ら€氬伐绋嬪闄?-----鐞嗕簨闀块閲囩浉鍐孅/title> <link rel="stylesheet" type="text/css" href="/css/G.css" /> <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> <script src="/js/jquery.jcarousellite.min.js" type="text/javascript"></script> <style type="text/css"> body { background-color:#000; } p { margin:0; padding:0;} /*骞荤伅鐗囧尯鍩熻儗鏅?/ .MainBg { background-color:#222; } /*鏍囬鍜岄〉鐮?/ .Title { color:#EEE; padding:5px 20px 0 20px; text-align:center; line-height:35px; height:40px; } .Title h1 { display:inline; } .Title .Counter { color:#71E0CE; font-size:18px;} .Title .CounterCurrent { color:#C00; font-size:18px; font-weight:bold; } /*鐏拌壊鍒嗛殧绾?/ .SpaceLine { border-bottom:1px solid #333; height:1px; font-size:1px; } /*澶у浘灞曠ず鍖哄煙*/ .OriginalPicBorder { padding:15px 15px 0 15px; } #OriginalPic { width:850px; overflow:hidden; position:relative; font-size:16px; } #OriginalPic img { display: block; margin: 0 auto; } /*榧犳爣鎵嬪娍*/ .CursorL { position: absolute; z-index:999; width:50%; height:600px; color:#FFF; left:120px; cursor:url(CurL.cur), auto; background:url(space.png) repeat scroll 0 0 transparent; } .CursorR { position: absolute; z-index:999; width:50%; height:600px; color:#FFF; right:0; cursor:url(CurR.cur), auto; background:url(space.png) repeat scroll 0 0 transparent; } /*灏忓浘棰勮鍜屾粦鍔?/ .SliderPicBorder { width:800px; height:600px; overflow:hidden; } .Summary { text-align:center; line-height:20px; display:block; width:865px; margin-right:10px; color:#999; overflow:hidden; background-color:#222; padding:10px; } .More { text-align:right; color:#666; line-height:40px; height:40px; font-size:12px; display:block; } .ThumbPicBorder { display: inline-block; *display: inline; zoom: 1; } #ThumbPic img { border: 3px solid #666; cursor: pointer; background-color: #666; margin:0 4px; width: 130px; height: 80px; display: block; } #ThumbPic img.active { border: 3px solid #FF9900; } </style> <link rel="alternate" media="only screen and(max-width: 640px)" href="http://studytheiris.com" > </head> <body> <form> <div id="Container"> <div class="MainBg"> <div class="HS10"></div> <div class="Title"> <h1>鐞嗕簨闀块閲嘃/h1> <span class="Counter">锛圏span class="CounterCurrent">1</span>/23锛堻/span> <h1></h1> </div> <div class="SpaceLine"></div> <div class="OriginalPicBorder"> <div id="OriginalPic"> <div id="aPrev" class="CursorL"></div> <div id="aNext" class="CursorR"></div> <!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>2013>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> --> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/1.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft"></span> <span class="More"><a href=""images/1.jpg"target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/2.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺圏/span> <span class="More"><a href=""images/2.jpg"target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/3.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">鐞嗕簨闀 寮犳檵鐢熸暀鎺堜笌鍗佷竴灞婂叏鍥芥斂鍗忓壇涓诲腑锛屽啘宸ュ厷涓ぎ甯稿姟鍓富甯檲瀹楀叴鍚堝奖</span> <span class="More"><a href=""images/3.jpg"target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/4.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堥櫔鍚岄檿瑗跨渷濮斿父濮斻€佹斂娉曞涔﹁搴勯暱鍏淬€侀檿瑗跨渷濮旀暀鑲插伐濮斿師涔﹁钁e皬榫欏湪鎴戞牎璋冪爺<br /> </span> <span class="More"><a href="images/4.jpg"target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/5.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌鏁欒偛閮ㄥ師鍓儴闀块瞾鏄曞悎褰包/span> <span class="More"><a href="images/5.jpg"target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/6.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌涓浗鏁欒偛瀛︿細鍘熶細闀块挓绉夋灄鍚堝奖</span> <span class="More"><a href="images/5.jpg"target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/7.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft"><br />寮犳檵鐢熸暀鎺堜笌涓浗姘戝姙鏁欒偛鍗忎細浼氶暱鐜嬩綈涔﹀悎褰包/span> <span class="More"><a href="images/7.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/8.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌鐪佹斂鍗忓師鍏氱粍鎴愬憳 鏈哄叧鍏氱粍涔﹁ 绉樹功闀垮澧炴垬鍚堝奖</span> <span class="More"><a href="images/8.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/9.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌鏁欒偛閮ㄦ皯鏃忔暀鑲插徃鍘熷徃闀块樋甯冮兘鍚堝奖</span> <span class="More"><a href="images/9.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/10.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">闄曡タ鐪佸鏁欒偛宸ュ涔﹁鐜嬪缓鍒╂潵鏍℃鏌ュ伐浣淈/span> <span class="More"><a href="images/10.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/10a.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">闄曡タ鐪佸鏁欒偛宸ュ鍓功璁般€侀檿瑗跨渷鏁欒偛鍘呭壇鍘呴暱锛堟鍘呯骇锛夊垬寤烘灄鏉ユ牎妫€鏌ュ伐浣淈/span> <span class="More"><a href="images/10a.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/11.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌闄曡タ鐪佸缁勭粐閮ㄥ師宸¤鍛樼帇寰锋皯鍚堝奖</span> <span class="More"><a href="images/11.jpg"target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/12.jpg" /></span> <span class="Clearer"> </span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堥櫔鍚岄檿瑗跨渷鏁欒偛鍘呭師鍘呴暱鏉庡叴鏃哄湪鎴戞牎瑙嗗療鎸囧</span> <span class="More"><a href="images/12.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/13.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌闄曡タ鐪佸楂樻暀宸ュ鍘熷壇涔﹁鏉庢櫤鍐涘悎褰包/span> <span class="More"><a href="images/13.jpg"target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/14.jpg" /></span> </span><span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堥櫔鍚岄檿瑗跨渷鏁欒偛鍘呭師甯稿姟鍓巺闀裤€佸巺鍏氱粍鍓功璁版瀹濇灄鍦ㄦ垜鏍¤瀵熸寚瀵稽/span> <span class="More"><a href="images/14.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/15.jpg" /></span> </span><span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌闄曡タ鐪佹暀鑲插巺鍓巺闀跨帇绱吹鍚堝奖</span> <span class="More"><a href="images15.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/16.jpg" /></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堥櫔鍚岄檿瑗跨渷鏁欒偛鍘呭師鍓巺闀胯敗閽婂埄鍦ㄦ垜鏍¤瀵熸寚瀵稽/span> <span class="Clearer"></span><span class="More"> <a href="images/16.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/17.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堥櫔鍚屾暀鑲插巺鍘熷壇鍘呴暱閮珛瀹忔潵鎴戞牎瑙嗗療</span> <span class="More"><a href=""images/17.jpg"target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/18.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌闄曡タ鐪佹斂搴滃浣嶅鍛樹細绉樹功闀胯瀹佸悎褰包/span> <span class="More"><a href="images/18.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/19.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌闄曡タ鐪佹暀鑲插巺鍘熷壇宸¤鍛樻潕楦d负杞ㄩ亾浜ら€氱患鍚堝疄璺靛熀鍦版彮鐗孅/span> <span class="More"><a href="images/19.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/20.jpg" /></span> <span class="Clearer"> </span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌闄曡タ鐪侀搧璺泦鍥㈡湁闄愬叕鍙告€荤粡鐞嗕箶鎬€鐜夊悎褰包/span><span class="More"><a href="images/20.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/21.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜笌钁楀悕瀛﹁€呬簬涓瑰悎褰包/span> <span class="More"><a href="images/21.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/22.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堜负涓搧灞€鍓€诲伐绋嬪笀棰佸彂鍏艰亴鏁欐巿鑱樹功</span> <span class="More"> <a href="images/22.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <p class="Hidden"> <span class="SliderPicBorder FlRight"><img src="images/23.jpg" /></span> <span class="Clearer"></span> <span class="Summary FlLeft">寮犳檵鐢熸暀鎺堝湪涓叴閫氳鍙傝</span> <span class="More"><a href="images/23.jpg" target="_blank"></a> <span class="OptLine">| </span> </span> </p> <!-- 鏂板>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>鏂板>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> --> </div> </div> <div class="SpaceLine"> </div> <div class="HS15"> </div> <div style="width: 960px; text-align: center;"> <div class="ThumbPicBorder"> <img src="img/ArrowL.jpg" id="btnPrev" class="FlLeft" style="cursor: pointer;" /> <div class="jCarouselLite FlLeft"> <ul id="ThumbPic"> <!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>鏂板>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> --> <li rel='1'> <img src="images/1.jpg" /> </li> <li rel='2'> <img src="images/2.jpg" /> </li> <li rel='3'> <img src="images/3.jpg" /> </li> <li rel='4'> <img src="images/4.jpg" /> </li> <li rel='5'> <img src="images/5.jpg" /> </li> <li rel='6'> <img src="images/6.jpg" /> </li> <li rel='7'> <img src="images/7.jpg" /> </li> <li rel='8'> <img src="images/8.jpg" /> </li> <li rel='9'> <img src="images/9.jpg" /> </li> <li rel='10'> <img src="images/10.jpg" /> </li> <li rel='11'> <img src="images/11.jpg" /> </li> <li rel='12'> <img src="images/12.jpg" /> </li> <li rel='13'> <img src="images/13.jpg" /> </li> <li rel='14'> <img src="images/14.jpg" /> </li> <li rel='15'> <img src="images/15.jpg" /> </li> <li rel='16'> <img src="images/16.jpg" /> </li> <li rel='17'> <img src="images/17.jpg" /> </li> <li rel='18'> <img src="images/18.jpg" /> </li> <li rel='19'> <img src="images/19.jpg" /> </li> <li rel='20'> <img src="images/20.jpg" /> </li> <li rel='21'> <img src="images/21.jpg" /> </li> <li rel='22'> <img src="images/22.jpg" /> </li> <li rel='23'> <img src="images/23.jpg" /> </li> <!-- 2013>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>2013>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> --> </ul> <div class="Clearer"> </div> </div> <img src="img/ArrowR.jpg" id="btnNext" class="FlLeft" style="cursor: pointer;" /> <div class="Clearer"> </div> </div> </div> <div class="HS15"></div> <script type="text/javascript"> //缂╃暐鍥炬粴鍔ㄤ簨浠 $(".jCarouselLite").jCarouselLite({ btnNext: "#btnNext", btnPrev: "#btnPrev", scroll: 1, speed: 240, circular: false, visible: 6 }); </script> <script type="text/javascript"> var currentImage; var currentIndex = -1; //鏄剧ず澶у浘(鍙傛暟index浠?寮€濮嬭鏁? function showImage(index) { //鏇存柊褰撳墠鍥剧墖椤电爜 $(".CounterCurrent").html(index + 1); //闅愯棌鎴栨樉绀哄悜宸﹀悜鍙抽紶鏍囨墜鍔 var len = $('#OriginalPic img').length; if (index == len - 1) { $("#aNext").hide(); } else { $("#aNext").show(); } if (index == 0) { $("#aPrev").hide(); } else { $("#aPrev").show(); } //鏄剧ず澶у浘 if (index < $('#OriginalPic img').length) { var indexImage = $('#OriginalPic p')[index]; //闅愯棌褰撳墠鐨勫浘 if (currentImage) { if (currentImage != indexImage) { $(currentImage).css('z-index', 2); $(currentImage).fadeOut(0, function () { $(this).css({ 'display': 'none', 'z-index': 1 }) }); } } //鏄剧ず鐢ㄦ埛閫夋嫨鐨勫浘 $(indexImage).show().css({ 'opacity': 0.4 }); $(indexImage).animate({ opacity: 1 }, { duration: 200 }); //鏇存柊鍙橀噺 currentImage = indexImage; currentIndex = index; //绉婚櫎骞舵坊鍔犻珮浜 $('#ThumbPic img').removeClass('active'); $($('#ThumbPic img')[index]).addClass('active'); //璁剧疆鍚戝乏鍚戝彸榧犳爣鎵嬪娍鍖哄煙鐨勯珮搴 //var tempHeight = $($('#OriginalPic img')[index]).height(); //$('#aPrev').height(tempHeight); //$('#aNext').height(tempHeight); } } //涓嬩竴寮 function ShowNext() { var len = $('#OriginalPic img').length; var next = currentIndex < (len - 1) ? currentIndex + 1 : 0; showImage(next); } //涓婁竴寮 function ShowPrep() { var len = $('#OriginalPic img').length; var next = currentIndex == 0 ? (len - 1) : currentIndex - 1; showImage(next); } //涓嬩竴寮犱簨浠 $("#aNext").click(function () { ShowNext(); if ($(".active").position().left >= 144 * 5) { $("#btnNext").click(); } }); //涓婁竴寮犱簨浠 $("#aPrev").click(function () { ShowPrep(); if ($(".active").position().left <= 144 * 5) { $("#btnPrev").click(); } }); //鍒濆鍖栦簨浠 $(".OriginalPicBorder").ready(function () { ShowNext(); //缁戝畾缂╃暐鍥剧偣鍑讳簨浠 $('#ThumbPic li').bind('click', function (e) { var count = $(this).attr('rel'); showImage(parseInt(count) - 1); }); }); </script> </div> </div> </form> <a target="_blank" title="百度" href="https://www.baidu.com/">百度搜索</a></br> <a target="_blank" title="搜狗" href="https://www.sogou.com/">搜狗搜索</a></br> <a target="_blank" title="360" href="https://www.so.com/">360搜索</a></br> </body> </html>