我爱模板网 > 特效插件 > 滚动轮播 >  局部切换和整体切换的jquery图片切换效果正文

局部切换和整体切换的jquery图片切换效果

特效介绍
jquery图片切换效果

        局部切换和整体切换的jquery图片切换效果:鼠标移动到任意一张图片,该区域的图片就会切换成别的图片,当鼠标点击任意一张图片时,所有图片都会进行切换。
使用方法
1、在head里面引入下面的css样式和js文件:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/cufon-yui.js" type="text/javascript"></script>
2、在您的html需要使用这种jQuery特效的容器内放入下面的代码:
<div id="hs_container" class="hs_container">
		<div class="hs_area hs_area1">
			<img class="hs_visible" src="images/area1/1.jpg" alt=""/>
			<img src="images/area1/2.jpg" alt=""/>
			<img src="images/area1/3.jpg" alt=""/>
		</div>
		<div class="hs_area hs_area2">
			<img class="hs_visible" src="images/area2/1.jpg" alt=""/>
			<img src="images/area2/2.jpg" alt=""/>
			<img src="images/area2/3.jpg" alt=""/>
		</div>
		<div class="hs_area hs_area3">
			<img class="hs_visible" src="images/area3/1.jpg" alt=""/>
			<img src="images/area3/2.jpg" alt=""/>
			<img src="images/area3/3.jpg" alt=""/>
		</div>
		<div class="hs_area hs_area4">
			<img class="hs_visible" src="images/area4/1.jpg" alt=""/>
			<img src="images/area4/2.jpg" alt=""/>
			<img src="images/area4/3.jpg" alt=""/>
		</div>
		<div class="hs_area hs_area5">
			<img class="hs_visible" src="images/area5/1.jpg" alt=""/>
			<img src="images/area5/2.jpg" alt=""/>
			<img src="images/area5/3.jpg" alt=""/>
		</div>
	</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
	$(function() {
		//custom animations to use
		//in the transitions
		var animations		= ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];
		var total_anim		= animations.length;
		//just change this to one of your choice
		var easeType		= 'swing';
		//the speed of each transition
		var animSpeed		= 450;
		//caching
		var $hs_container	= $('#hs_container');
		var $hs_areas		= $hs_container.find('.hs_area');
		
		//first preload all images
		$hs_images          = $hs_container.find('img');
		var total_images    = $hs_images.length;
		var cnt             = 0;
		$hs_images.each(function(){
			var $this = $(this);
			$('<img/>').load(function(){
				++cnt;
				if(cnt == total_images){
					$hs_areas.each(function(){
						var $area 		= $(this);
						//when the mouse enters the area we animate the current
						//image (random animation from array animations),
						//so that the next one gets visible.
						//"over" is a flag indicating if we can animate 
						//an area or not (we don't want 2 animations 
						//at the same time for each area)
						$area.data('over',true).bind('mouseenter',function(){
							if($area.data('over')){
								$area.data('over',false);
								//how many images in this area?
								var total		= $area.children().length;
								//visible image
								var $current 	= $area.find('img:visible');
								//index of visible image
								var idx_current = $current.index();
								//the next image that's going to be displayed.
								//either the next one, or the first one if the current is the last
								var $next		= (idx_current == total-1) ? $area.children(':first') : $current.next();
								//show next one (not yet visible)
								$next.show();
								//get a random animation
								var anim		= animations[Math.floor(Math.random()*total_anim)];
								switch(anim){
									//current slides out from the right
									case 'right':
										$current.animate({
											'left':$current.width()+'px'
										},
										animSpeed,
										easeType,
										function(){
											$current.hide().css({
												'z-index'	: '1',
												'left'		: '0px'
											});
											$next.css('z-index','9999');
											$area.data('over',true);
										});
										break;
									//current slides out from the left
									case 'left':
										$current.animate({
											'left':-$current.width()+'px'
										},
										animSpeed,
										easeType,
										function(){
											$current.hide().css({
												'z-index'	: '1',
												'left'		: '0px'
											});
											$next.css('z-index','9999');
											$area.data('over',true);
										});
										break;
									//current slides out from the top	
									case 'top':
										$current.animate({
											'top':-$current.height()+'px'
										},
										animSpeed,
										easeType,
										function(){
											$current.hide().css({
												'z-index'	: '1',
												'top'		: '0px'
											});
											$next.css('z-index','9999');
											$area.data('over',true);
										});
										break;
									//current slides out from the bottom	
									case 'bottom':
										$current.animate({
											'top':$current.height()+'px'
										},
										animSpeed,
										easeType,
										function(){
											$current.hide().css({
												'z-index'	: '1',
												'top'		: '0px'
											});
											$next.css('z-index','9999');
											$area.data('over',true);
										});
										break;
									//current slides out from the right	and fades out
									case 'rightFade':
										$current.animate({
											'left':$current.width()+'px',
											'opacity':'0'
										},
										animSpeed,
										easeType,
										function(){
											$current.hide().css({
												'z-index'	: '1',
												'left'		: '0px',
												'opacity'	: '1'
											});
											$next.css('z-index','9999');
											$area.data('over',true);
										});
										break;
									//current slides out from the left and fades out	
									case 'leftFade':
										$current.animate({
											'left':-$current.width()+'px','opacity':'0'
										},
										animSpeed,
										easeType,
										function(){
											$current.hide().css({
												'z-index'	: '1',
												'left'		: '0px',
												'opacity'	: '1'
											});
											$next.css('z-index','9999');
											$area.data('over',true);
										});
										break;
									//current slides out from the top and fades out	
									case 'topFade':
										$current.animate({
											'top':-$current.height()+'px',
											'opacity':'0'
										},
										animSpeed,
										easeType,
										function(){
											$current.hide().css({
												'z-index'	: '1',
												'top'		: '0px',
												'opacity'	: '1'
											});
											$next.css('z-index','9999');
											$area.data('over',true);
										});
										break;
									//current slides out from the bottom and fades out	
									case 'bottomFade':
										$current.animate({
											'top':$current.height()+'px',
											'opacity':'0'
										},
										animSpeed,
										easeType,
										function(){
											$current.hide().css({
												'z-index'	: '1',
												'top'		: '0px',
												'opacity'	: '1'
											});
											$next.css('z-index','9999');
											$area.data('over',true);
										});
										break;		
									default:
										$current.animate({
											'left':-$current.width()+'px'
										},
										animSpeed,
										easeType,
										function(){
											$current.hide().css({
												'z-index'	: '1',
												'left'		: '0px'
											});
											$next.css('z-index','9999');
											$area.data('over',true);
										});
										break;
								}	
							}
						});
					});
					
					//when clicking the hs_container all areas get slided
					//(just for fun...you would probably want to enter the site
					//or something similar)
					$hs_container.bind('click',function(){
						$hs_areas.trigger('mouseenter');
					});
				}
			}).attr('src',$this.attr('src'));
		});			
		

	});
</script>
3、请将需要切换的一组照片放在一个文件夹,然后修改类似下面的代码:
<img class="hs_visible" src="images/area5/1.jpg" alt=""/>
<img src="images/area5/2.jpg" alt=""/>
<img src="images/area5/3.jpg" alt=""/>
第一张为载入时显示的图片,后面两张为每次切换的图片。


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:360°立体手机展示jquery图片轮播 下一篇:仿爱奇艺电视首页banner flash+xml图片滚动
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢