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.=================================================================== *//* <!]> */</script></head><body><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]