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

xjwolaile

浏览: 342165 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

学习
jQuery
前端技术

siblings removeClass stop slideDown slideUp

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

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

3、效果图

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>

images.rar (412.4 KB)
下载次数: 16

查看图片附件

分享到：

jQuery高仿2012淘宝商城多格子焦点图滚动切 ... | jQuery图片切换显示隐藏左右按钮控制图片-2 ...

2013-06-27 23:22
浏览 2741
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>