jQuery js 图片替换显示 缩略图 滚动预览小图的相册
jQuery js 图片轮换显示 缩略图 滚动预览小图的相册
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JQuery实现带侧边滚动预览小图的相册 - 分享JavaScript-sharejs.com</title> <style type="text/css"> #gallery {width:750px; margin:0 auto;} #thumbnails {width:100px; height:250px; overflow:auto; float:right; margin:10px 0;} #thumbnails img {display:block; width:50px; height:50px; float:left; padding:3px; cursor:pointer;} #thumbnails ul {margin:0; padding:0; list-style:none;} #thumbnails ul li div {display:none;} #fullSize {width:600px; font-family:georgia, serif; border:1px solid #aaa; background:#fff;} #fullSize img {display:block; margin:10px auto; width:auto; padding:1px; background:#000;} #fullSize div {background:#fff; margin:0 auto; text-align:left; padding:10px 0;} #fullSize div h1 {font-size:18px; padding:5px 0; margin:0;} #fullSize div p {font-size:12px; line-height:1.6em; color:#000; padding:5px 0; margin:0;} </style> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> /* ================================================================ This copyright notice must be untouched at all times. Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved. =================================================================== */ /* <![CDATA[ */ $(document).ready(function(){ /* show first image and information */ firstStr = $('.thumb'); showStr = firstStr.html(); showDiv(showStr) $('.thumb').children(":first") .css("background", "#000"); /* monitor mouse clicks */ $('.thumb').click(function(){ $('.thumb img') .css("backgroundColor", "#fff"); $(this).children(":first") .css("background", "#000"); htmlStr = $(this).html(); /* swap images and information */ $('#fullSize div') .slideUp(500); $('#fullSize img') .animate({"width": "1px"}, 400) .animate({"height": "0px"}, 400, function(){showDiv(htmlStr)}); }); /* show image and information */ function showDiv (htmlStr) { $('#fullSize') .html(htmlStr); $('#fullSize img') .hide(); $('#fullSize div') .hide(); imgWidth = ($('#fullSize img').outerWidth()); imgHeight = ($('#fullSize img').outerHeight()); $('#fullSize div') .css("width",imgWidth + "px"); $('#fullSize img') .css("height", "1px") .css("width", "1px") .animate({"height": imgHeight}, 400) .animate({"width": imgWidth}, 400, function(){showInfo()}); } function showInfo () { $('#fullSize div') .slideDown(750); } }); /* ]]> */ </script> </head> <body onload="enlarge()"> <div id="gallery"> <div id="thumbnails"> <ul id="innerContainer"> <li class="thumb"> <img src="trees/t1.jpg" alt="" /> <div> <h1>Title One</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t2.jpg" alt="" /> <div> <h1>Title Two</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t3.jpg" alt="" /> <div> <h1>Title Three</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t4.jpg" alt="" /> <div> <h1>Title Four</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t5.jpg" alt="" /> <div> <h1>Title Five</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t6.jpg" alt="" /> <div> <h1>Title Six</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t7.jpg" alt="" /> <div> <h1>Title Seven</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t8.jpg" alt="" /> <div> <h1>Title Eight</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t9.jpg" alt="" /> <div> <h1>Title Nine</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t10.jpg" alt="" /> <div> <h1>Title Ten</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t11.jpg" alt="" /> <div> <h1>Title Eleven</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t12.jpg" alt="" /> <div> <h1>Title Twelve</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t13.jpg" alt="" /> <div> <h1>Title Thirteen</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t14.jpg" alt="" /> <div> <h1>Title Fourteen</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t15.jpg" alt="" /> <div> <h1>Title Fifteen</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t16.jpg" alt="" /> <div> <h1>Title Sixteen</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t17.jpg" alt="" /> <div> <h1>Title Seventeen</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t18.jpg" alt="" /> <div> <h1>Title Eighteen</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> <li class="thumb"> <img src="trees/t19.jpg" alt="" /> <div> <h1>Title Nineteen</h1> <p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p> </div> </li> </ul> </div> <div id="fullSize"> </div> </div> <br clear="all" /> <br><br> <div align="center"> <script language="javascript" src="http://www.sharejs.com/js/720.js"></script> <br><br> 获取更多JavaScript代码,请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a> </div> </body> </html>
1 楼
ligh820
2011-03-18
javaeye 不成文规定
1, 有预览地址
2, 有源码下载
看来你的这篇文章还有改进的地方!
1, 有预览地址
2, 有源码下载
看来你的这篇文章还有改进的地方!
2 楼
chengyu2099
2011-05-17
我只是作为笔记, 自己看的,你多情了