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

最新推荐文章于 2024-03-14 19:48:19 发布
最新推荐文章于 2024-03-14 19:48:19 发布
阅读量147 收藏 1
点赞数
分类专栏： JavaScript 文章标签： jQuery CSS JavaScript HTML XHTML ViewUI 

<!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>

maomaoyu2099163
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
11-23
【jQuery图片轮播效果】...本文将探讨如何使用jQuery实现左右滚动、图片放大和缩略图轮播的功能。 首先，为了实现这个效果，我们需要引入jQuery库。在HTML文件的`<head>`部分，添加如下代码以引用jQuery库： ```html ...
jquery图片轮播带缩略图
☆╮123☆
06-05 662
（1）html 标签： div class="lb_list"> span class="btn left_btn">span> div class="large_box"> ul> li> img src="images/img1.jpg" width="530" height="350">
用jQuery实现轮播图
最新发布
m0_59302271的博客
03-14 1106
使用jQuery实现简单的轮播图
jquery实现图片预览（纯jquery实现）
L_Shaker的博客
06-28 1683
【代码】jquery实现图片预览（纯jquery实现）
使用jQuery实现图片轮播
m0_60013147的博客
12-26 3270
图片轮播的基本原理如下图 可以设置overflow：hidden来隐藏除了要显示的图片之外的图片（即其他三张图） 以下为实现代码 index.css文件放置css代码 *{ margin: 0; padding: 0; } .container{ width: 100em; margin: 0 auto; } /* 所有图片div */ .myimage{ position: absolute; width: 400%; } /* 单张..
jQuery实现各种轮播图
热门推荐
小白小白从不日别的博客
11-10 1万+
列举了Jquery实现的一些常见的轮播图
jquery缩略图和大图滚动切换预览特效
06-01
本教程将深入讲解如何使用jQuery实现一个缩略图与大图滚动切换预览的特效，这对于创建视觉吸引人的图像展示区域至关重要。 首先，我们需要理解基本的HTML结构，通常包括一个容器来承载所有图片，一个用于显示大图的...
jQuery图片相册点击弹出大图预览
06-24
在网页设计中，jQuery图片相册点击弹出大图预览是一种常见的交互功能，它能够提升用户体验，使得用户可以方便地查看和浏览图片。本文将详细介绍这个功能的实现原理、核心代码以及相关技术要点。 首先，jQuery是一个...
jQuery图片相册点击缩略图弹出大图预览特效
06-11
本教程将深入讲解如何使用jQuery实现一个图片相册功能，当用户点击缩略图时，能够弹出大图预览，并带有切换和关闭功能。 首先，我们需要在HTML文件（如`index.html`）中构建基本的页面结构。通常，一个图片相册会...
jQuery大小图滚动切换预览特效
07-24
"jQuery大小图滚动切换预览特效"是一种常见的技术应用，它能够提供一个直观且吸引人的用户体验，尤其是在展示图片集或产品详情时。这个特效允许用户在浏览缩略图时，通过滚动或点击来无缝切换大图预览，从而提升网站...
javascript图片预览（滚动放大缩小和拖动查看）
11-24
打开html可直接查看例子，例子中图片url写死的，是一个网络图片，如果该图片不见了可直接更改那个地址。 完全是自己写的滚动和拖动行为
jQuery可放大预览的图片滑块插件
08-23
这是一款基于jQuery的图片滑块焦点图插件，这款jQuery焦点图插件的特点是可以横向左右滑动图片，并且点击图片可以进行放大预览，唯一的缺陷是这款焦点图并不能循环切换，如果你有较好的JavaScript功底，可以自己修改代码来实现这一功能。
jquery实现图片预览
12-27
jquery做的立即图片预览功能
Jquery 3屏显示前后图片预览焦点图滑动切换效果
11-17
Jquery 3屏显示前后图片预览焦点图滑动切换效果 J
js实现图片的滑轮滚动放大预览、拖动、旋转
02-15
实现图片的滑轮滚动放大预览、拖动、旋转功能，此文件为完整页面demo及JS文件
js商品图片左右拖拽滑块滚动预览
ICode联盟
09-19 449
原生js原生js仿苹果商品图片滑块滚动预览。① 拖动滚动条，图片列表缓冲滑动至目标点；② 滚动条两端鼠标移入自动滑动；③ 滚动条滑动到两端自动更换为停止标识；④ 点击滚动条黑色背景区，滚动条及图片列表缓冲滑动至目标点；⑤ 支持键盘左右键；
js实现页面图片滚动放大预览，拖动、旋转
落日流年
04-24 6788
demo源码地址：https://download.csdn.net/download/zwl18210851801/10958698 1.html内容 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;imgZoom&lt;/title&gt; &am
js实现缩略图自动滚动并显示对应大图
06-02
js实现缩略图自动滚动并显示对应大图js实现缩略图自动滚动并显示对应大图
jq实现简单的swiper轮播预览原图
qq_43588387的博客
12-15 855
效果图： 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>swiper+jq实现预览原图效果</title> <!-- 引入swiper样式 --> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/> <style
JAVA JSP异步图片上传预览兼容多浏览器
因此，作者提出了一种异步上传的策略，通过前端使用jQuery的ajaxfileupload.js库实现图片上传，并将文件保存到服务器的临时目录。这种做法允许前端快速获取上传图片的路径，然后在img标签中显示，从而模拟本地预览的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值