jQuery自适应图片画廊插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery自适应图片画廊插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <meta http-equiv="content-language" content="en" />
  <title>JMorph - morphing jquery gallery demo</title>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="jmorph.js" type="text/javascript"></script>
  <style>
	body
	{
		width:100%;
		text-align:center;	
		font-size:10px;
	}
	a
	{
		font-size:1.1em;
	color:#003666;
		text-decoration:none;
	}
	a:hover
	{
		color:#0063DC;
	}
	#container
	{
		background:#fff;
		position:relative;
		text-align:center;
	}

  .clearfix:after 
  {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .clearfix {display: inline-block;}  /* for IE/Mac */
	.jmorph
	{
			width:640px;
			margin:auto 0px;
	}

	.jmorph .imageContainer
	{
		display:table;
	}
  
  .jmorph .image
  {
	background:#ccc;
	padding:10px;
	display:table-cell;
  }
  
  .jmorph .image .currentImg,.jmorph .image .nextImg
  {
  	background-repeat:no-repeat;
  	background-position:center; 
  	position:relative;
  }
  
  .jmorph .image .nextImg
  {
  	top:0; 
  	left:0; 
  	position:absolute;	
  	
  }
  
  .jmorph div a.previous,.jmorph div a.next
  { 
  	padding:0.5em;
  	margin:1em;
  	float:left;
  }

  .jmorph .image a.previous,.jmorph .image a.next
  {
  	font-size:1.5em;
  }
  
  .jmorph ul.band
  {
  	padding:5px;	
  	list-style:none;
  	background:#ddd;
  	width:5000px;
  	margin-left:0px;
  }
  
  .bandContainer
  {
  	width:300px;
  	overflow:hidden;
  	float:left;
  	text-align:left;
  }
  
  .jmorph ul.band li
  {
  	display:inline;
  	margin:5px;
  	padding:5px
  }
  .jmorph ul.band li.selected
  {
  	background:#fff;
  }
  </style>
</head>

<body>
<div id="container">
<h1><a href="#">jQuery morphing gallery</a></h1>
<a href="#">back to the article</a>
		<div class="jmorph">
			<div class="imageContainer">
			<div class="image">
				<div class="currentImg" style>
					<div class="nextImg"></div>
				</div>
			</div>
			</div>
			<div class="clearfix">
			<a href="#previous" class="previous">&lt;&nbsp;Prev</a>
			<div class="bandContainer">
			<ul class="band">
				<li><a href="1.jpg">Forest</a></li>
				<li><a href="2.jpg">Cliff</a></li>
				<li><a href="3.jpg">Sky</a></li>
				<li><a href="4.jpg">Town</a></li>
				<li><a href="5.jpg">Trees</a></li>
			</ul>
			</div>
			<a href="#next" class="next">Next&nbsp;&gt;</a>
			</div>
		</div>
</div>
<script>
$(".jmorph").jmorphGallery();
</script>
</body>
</html>

JS代码(jmorph.js):

/*** Morph gallery for jQuery* Copyright (C) 2008 Ziadin Givan www.CodeAssembly.com** This program is free software:you can redistribute it and/or modify* it under the terms of the GNU Lesser General Public License as published by* the Free Software Foundation,either version 3 of the License,or* (at your option) any later version.** This program is distributed in the hope that it will be useful,* but WITHOUT ANY WARRANTY;
	without even the implied warranty of* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the* GNU General Public License for more details.** You should have received a copy of the GNU Lesser General Public License* along with this program. If not,see http://www.gnu.org/licenses/** Examples* $(".jmorph").jmorphGallery();
	*/
jQuery.fn.jmorphGallery = function(settings){
	return this.each( function()//do it for each matched element{
	settings = jQuery.extend(//provide default settings{
	timeout:1000}
,settings);
	var parent = $(this);
	var images = new Array;
	var currentImageNr = 0;
	var preloadImage = new Image();
	//get all images$(".band li a",parent).each(function(i){
	images.push($(this).attr('href'));
}
);
	//load first imagepreloadImage.src = images[currentImageNr];
	$(preloadImage).bind('load',function (){
	$('.nextImg',parent).css('background-image','url(' + images[currentImageNr] + ')').width(preloadImage.width).height(preloadImage.height).css('opacity','0');
	$('.currentImg',parent).animate({
	width:preloadImage.width,height:preloadImage.height}
,settings.timeout,function(e){
	$('.currentImg',parent).css('background-image','url(' + images[currentImageNr] + ')');
	$('.nextImg',parent).css('opacity','1');
}
);
	$('.nextImg',parent).animate({
	opacity:'1'}
,settings.timeout);
}
);
	function loadImage(){
	preloadImage.src = images[currentImageNr];
	var current = $('ul li',parent).removeClass('selected').eq(currentImageNr).addClass('selected');
	var band = $('.band',parent);
	band.animate({
	marginLeft:( - current.position().left + band.offset().left) + "px"}
);
}
$(".previous",parent).click(function(e){
	currentImageNr <= 0 ? 0:currentImageNr--;
	loadImage();
}
);
	$(".next,.nextImg",parent).click(function(e){
	currentImageNr >= images.length - 1 ? images.length - 1:currentImageNr++;
	loadImage();
}
);
	$("div ul li",parent).click(function(e){
	e.preventDefault();
	currentImageNr = $('li',this.parentNode).index(this);
	loadImage();
}
);
}
);
}
;

附件:下载该文件资源,减少时间成本(增值服务)