`
chengyu2099
  • 浏览: 471303 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery js 图片轮换显示 缩略图 滚动预览小图的相册

jQueryCSSJavaScriptHTMLXHTML 
阅读更多 
<!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>
  • 大小: 251.1 KB
分享到：
| js 滚动图片
评论
2 楼 chengyu2099 2011-05-17  
我只是作为笔记， 自己看的，你多情了
1 楼 ligh820 2011-03-18  
javaeye 不成文规定
1, 有预览地址
2, 有源码下载

看来你的这篇文章还有改进的地方!
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery带缩略图轮换相册

    "jQuery带缩略图轮换相册"是一个典型的JavaScript插件应用，利用jQuery的强大功能，实现了具有缩略图导航和动态轮换效果的相册系统。下面我们将详细探讨这一技术的实现原理和关键点。 首先，jQuery相册的核心在于...

    jquery实现图片预览,缩略图,效果不错

    **jQuery实现图片预览与缩略图功能** 在网页开发中，图片预览和缩略图功能是非常常见的需求，尤其在用户上传图片或者浏览相册时。jQuery作为一个轻量级的JavaScript库，提供了丰富的API和插件，使得实现这样的功能...

    带滚动缩略图的全屏jQuery相册代码.rar

    带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的...

    jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览

    在本示例中，我们关注的是使用jQuery实现的全屏图片相册功能，其中包含了点击缩略图查看大图的预览效果。这个功能常见于许多网站，用于展示产品图片或摄影作品。 首先，我们要理解jQuery幻灯片的基本原理。幻灯片...

    jQuery左右滚动支持图片放大缩略图图片轮播代码(附demo,可直接用)

    本项目"jQuery左右滚动支持图片放大缩略图图片轮播代码"提供了一种高效的解决方案，包含了一个可直接使用的demo，下面我们将详细探讨这个轮播代码的关键知识点。 首先，jQuery的`.animate()`方法是实现左右滚动的...

    jQuery多功能滚动预览缩略图特效插件

    thumbnail-scroller是一款非常实用的jQuery多功能滚动预览缩略图特效插件。该滚动预览缩略图可以单独使用，也可以和lightbox或图片画廊等一起使用。它通过点击前后导航按钮或将鼠标放在长条缩略图上进行前后图片预览...

    jquery图片切换带缩略图片滚动切换

    jquery图片切换带缩略图片滚动切换

    jquery四屏带缩略图滚动焦点图.zip

    "jQuery四屏带缩略图滚动焦点图"是一款广泛应用于网页设计中的JavaScript特效，它巧妙地将图片切换与缩略图导航相结合，为用户提供了一种直观且交互性强的展示方式。本文将深入解析这一特效的实现原理、核心功能以及...

    带滚动缩略图的全屏jQuery相册代码.zip

    在这个代码实例中，jQuery将被用来处理相册的显示和交互，如切换全屏模式、展示和隐藏缩略图、实现平滑的图片切换效果等。 全屏模式的实现通常涉及到HTML和CSS的布局调整，例如使用CSS3的`transform`和`transition`...

    一款带缩略图和左右按钮的jquery相册插件

    缩略图是一种小尺寸的图片预览，用于快速浏览一组图片。在这个插件中，缩略图通常会排列在主图片下方或侧面，用户可以通过点击不同的缩略图来切换主显示区域的图片。缩略图的实现涉及到CSS样式布局和JavaScript事件...

    17种基于jquery的图片缩略图列表

    4. **带有预览的缩略图**：通过jQuery添加鼠标悬停事件，显示大图预览，增加用户体验。可以使用zoomify.js或previewthumb.js等插件。 5. **无限滚动**：结合jQuery和 Infinite Scroll 插件，当用户滚动到底部时自动...

    jQuery左右图片自动滚动特效.zip

    此外，"JS特效-图片相册"这个标签暗示了这个项目可能还包括了图片预加载、分页导航、鼠标悬停暂停滚动等常见图片相册功能。预加载可以提升用户体验，确保图片在显示前已经完全加载；分页导航则允许用户手动切换图片...

    jQuery焦点图 图片轮换

    综上所述，jQuery焦点图图片轮换涉及了jQuery库的使用、DOM操作、事件处理、动画效果、定时器应用等多个JavaScript和Web开发的重要方面。掌握这些技能，不仅可以制作出吸引人的焦点图，还能提升整个网站的用户体验。

    jQuery点击缩略图显示大图切换效果代码.zip

    总的来说，"jQuery点击缩略图显示大图切换效果代码"是一个集成了图片预览、用户交互和动态效果的网页组件，其背后涉及到了jQuery的基本用法、DOM操作、事件处理、CSS样式以及JavaScript编程技巧。对于网页开发者来说...

    jquery实时缩略图加载显示.rar

    本教程将聚焦于一个特定的应用场景：使用jQuery实现"实时缩略图加载显示"功能，这在网页设计中非常常见，如图片预览、相册展示等。 首先，我们要理解这个功能的核心概念。实时缩略图加载是指当用户上传或浏览一组...

    jquery新闻图片轮换

    【jQuery 新闻图片轮换】 在网页设计中，新闻图片轮换是一种常见的视觉效果，用于展示多张新闻图片并自动切换，以吸引用户的注意力。jQuery 是一个广泛使用的 JavaScript 库，它提供了丰富的功能和简洁的 API，使得...

    垂直滚动jQuery焦点图，带缩略图

    主展示区域会显示当前选中的图片，而缩略图区域则显示所有图片的预览，用户可以通过点击缩略图来切换主展示区域的内容。 接着，我们导入jQuery库，并编写JavaScript代码来实现焦点图的动态效果。这里的关键步骤包括...

    jQuery-图片轮换

    图片轮换的基本思想是通过JavaScript控制DOM（Document Object Model）中的图片元素显示与隐藏，实现定时切换的效果。主要涉及到以下几个关键步骤： 1. 创建一个包含多张图片的HTML结构，通常使用`&lt;ul&gt;`和`&lt;li&gt;`...

    jquery 图片轮换插件

    通过结合jQuery与图片轮换插件，我们可以快速地构建出高性能、低延迟的图片轮换功能，而无需深入复杂的JavaScript代码。 **基本原理** 图片轮换插件的核心原理是利用jQuery的定时器功能（如`setInterval`）来定期...

    jQuery带缩略图与标题切换焦点图

    在本例中，"jQuery带缩略图与标题切换焦点图" 是一个功能丰富的焦点图插件，它结合了缩略图导航和标题显示，提供了更友好的用户体验。以下是关于这个焦点图实现的关键知识点： 1. **jQuery库**: jQuery是一个广泛...

Magicbox
Global site tag (gtag.js) - Google Analytics