jQuery图像幻灯片上下滑动图片切换-20130627

程序员文章站 2022-03-07 08:05:22

...

1、效果及功能说明
图像幻灯片制作鼠标滑过缩略图显示相应的大图，让大图上下滑动切换，默认下图像幻灯片自动轮播

2、实现原理
自动切换小图片让大div获得切换小图片的路径让切换到的小图片能在大div里显示出来让图片定义一个2秒的动画效果让小图片通过动画的效果切换切换的小图片会有一个边框的样式改变来让用户知道现在是哪一张然后通过伪类来定义个鼠标触及的效果让鼠标触及到小图片动画停止大div里显示鼠标触及的小图片的放大版在鼠标离开小图片和大图片以后的2秒动画效果自动进行按照鼠标触及的小图片的位置继续往后切换图片

3、效果图

jQuery图像幻灯片上下滑动图片切换-20130627

博客分类：学习jQuery前端技术 siblingsremoveClassstopslideDownslideUp

jQuery图像幻灯片上下滑动图片切换-20130627

博客分类：学习jQuery前端技术 siblingsremoveClassstopslideDownslideUp

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>


<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";background:#2a0504;}
/* acttabbox */
.acttabbox{width:990px;height:300px;overflow:hidden;padding:4px;border:solid 1px #690501;background:#541410;margin:40px auto;}
.tabcon{float:left;width:702px;height:300px;overflow:hidden;margin-right:-2px;} 
.tabcon li{width:702px;height:300px;}
.tabcon li img{width:702px;height:300px;float:left}
.tabnav{float:right;width:290px;}
.tabnav li{float:left;position:relative;margin:-1px 0 0 0;height:99px;border:1px solid #000;overflow:hidden;}
.tabnav .cur{border:1px solid #fff;z-index:9;}
</style>

<div class="acttabbox">
	<ul class="tabcon">
		<li><a href="http://www.17sucai.com/" target="_blank"><img width="702" height="300" src="images/T1XXb8XjtXXXak1cjj-702-300.jpg" alt="敢死队2" /></a></li>
		<li><a href="http://www.17sucai.com/" target="_blank"><img width="702" height="300" src="images/T1MdL7Xg4cXXak1cjj-702-300.jpg" alt="活埋" /></a></li>
		<li><a href="http://www.17sucai.com/" target="_blank"><img width="702" height="300" src="images/T1STrHXlVqXXak1cjj-702-300.jpg" alt="复仇者联盟" /></a></li>
	</ul>
	<ul class="tabnav">
		<li class="cur"><a href="http://www.17sucai.com/" target="_blank"><img width="288" height="99" src="images/T111L6Xe8gXXbCOp6D-288-99.jpg" alt="敢死队2" /></a></li>
		<li><a href="http://www.17sucai.com/" target="_blank"><img width="288" height="99" src="images/T1xYL6XX4gXXbCOp6D-288-99.jpg" alt="活埋" /></a></li>	
		<li><a href="http://www.17sucai.com/" target="_blank"><img width="288" height="99" src="images/T1gd2NXd0cXXbCOp6D-288-99.jpg" alt="复仇者联盟" /></a></li>
	</ul> 
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){    

	var index=0,len=$('.tabnav li').length,_timer=null;  
	/*0 分页的数量 len里面放有tabnav里面所有的li的长度 还有超链接的打开方式*/
	function showTab(index){	
	/*定义个方法里面放有index*/		
		$('.tabnav li').eq(index).addClass('cur').siblings().removeClass('cur');
		/*右边有三个小容器 当鼠标移动到三个小容器的任意一个的时候会有一个白色外框的效果*/				 
		$('.tabcon li').eq(index).stop(true,true).slideDown('slow').siblings().slideUp('slow');
		/*根据右边的三个小容器的不管是鼠标触及还是自动切换都那一个都在左边的大容器里面显示出相对的图片*/
	}
	
	function auto(){
	/*定于一个auto方法*/
		timer=setTimeout(function(){
		/*在timer里面附加一个setTimeout方法*/
			index=(index+1)%len;
			/*自动切换图片*/
			showTab(index);
			/*启动效果*/
			timer=setTimeout(arguments.callee,3500);
			/*在自动切换的时候的时间3.5秒*/
		},1000)	
		/*切换大图所用的时间1秒*/
	}
	
	auto(); 
	/*实现方法*/
	$('').mouseenter(function(){
	/*改变.tabnav li背景颜色*/
		var index=$(this).index(); 
		/*鼠标触及以后显示出哪一张图片*/
		showTab(index);	 
		/*启动效果*/
	});
	
	$('.acttabbox').hover(function(){
	/*创建一个伪类*/
		clearTimeout(timer);
		/*是将timer放入整个运行的过程不放全部的运行时间就会变成1秒*/
	},function(){
		auto();
		/*启动效果*/
	});
	
});
</script>
</body>
</html>