jquery 展示图片/焦点图插件 show_img-1.1

yunmoxue

浏览: 289341 次
性别:
来自: 郑州

最近访客更多访客>>

daizikang

PollyYeung

xuhuanfeng

bluecoyote

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html/js/css
点滴

演示文档
html

<!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>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/show_img.js"></script>
<style>
	ul,li{
		margin:0;
		padding:0;
	}
	li{
		list-style:none;
	}
	.img_wrapper{
		width:950px;
		height:470px;
		overflow:hidden;
		position:relative;
	}
	.img_sub_wrapper{
		position:absolute;
	}
	.img_sub_wrapper img{
		position:absolute;
		display:none;
	}
	.num_list {
		margin-left:865px;
		margin-top:440px;
		position: absolute;
	}
	.num_list li{
		float:left;
		width:15px;
		height:20px;
		text-align:center;
		background:#fefefe;
		margin: 0 0 0 3px;
		cursor:pointer;
	}
	.num_list li.hover{
		background:#000;
		color:#fff;
	}
	#control{
		float:left;
		margin:120px 0 0 20px;
	}
	#img_wrapper{
		float:left;
	}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		var show_img = $('#img_wrapper').show_img();
		$('#play_btn').click(function(){
			show_img.play();
		});
		$('#pause_btn').click(function(){
			show_img.pause();
		});
		$('#next_btn').click(function(){
			show_img.next_img();
		});
		$('#back_btn').click(function(){
			show_img.back_img();
		});
		$('#show_num_text_btn').click(function(){
			show_img.show_number_text();
		});
		$('#hide_num_text_btn').click(function(){
			show_img.hide_number_text();
		});
		$('#show_num_list_btn').click(function(){
			show_img.show_number_list();
		});
		$('#hide_num_list_btn').click(function(){
			show_img.hide_number_list();
		});
		$('#fade_btn').click(function(){
			show_img.set_fade();
		});
		$('#slide_btn').click(function(){
			show_img.set_slide();
		});
	});
</script>
</head>

<body>
	<div id="img_wrapper" class="img_wrapper">
		<div id="img_sub_wrapper" class="img_sub_wrapper">
			<img src="imgs/01.jpg" style="display:block"/>
			<img src="imgs/02.jpg" />
			<img src="imgs/04.jpg" />
			<img src="imgs/05.jpg" />
		</div>
		<ul id="num_list" class="num_list"></ul>
	</div>
	<div id="control">
		<input type="button" value="play" id="play_btn" /> <br />
		<input type="button" value="pause" id="pause_btn" />  <br />
		<input type="button" value="back" id="back_btn" /> <br />
		<input type="button" value="next" id="next_btn" />  <br />
		<input type="button" value="hide number text" id="hide_num_text_btn" />  <br />
		<input type="button" value="show number text" id="show_num_text_btn" />  <br />
		<input type="button" value="hide number list" id="hide_num_list_btn" />  <br />
		<input type="button" value="show number list" id="show_num_list_btn" />  <br />
		<input type="button" value="fade" id="fade_btn" />  <br />
		<input type="button" value="slide" id="slide_btn" />  <br />
	</div>
</body>
</html>

js 文件:

(function($){
	var timer = 0;
	var show_img = function(options){
		init.call(this,options);
		return $.fn.show_img;
	};
	function init(options){
		//alert($(this).find('.img_sub_wrapper').children('img').length);
		$.extend({},show_img.defaults,options);
		do_next();
		show_img.img_list = $(this).find('.img_sub_wrapper').children('img');
		show_img.num_list = $(this).find('.num_list');
		show_img.defaults.img_length = show_img.img_list.length;
		create_number_list();		
		$($(show_img.num_list).find('li')[show_img.defaults.current_img]).
			addClass('hover');
	}
	function do_next(){
		clearTimeout(timer);
		if(show_img.defaults.play==1){
			timer = setTimeout(function(){
				show_img.next_img();
			},show_img.defaults.pause_speed+show_img.defaults.speed);
		}
	}
	function create_number_list(){
		var html = '';
		for(var i=1;i<=show_img.defaults.img_length;i++){
			html = '<li class="number_list"><span class="number_text">';
			html += i;
			html += '</span></li>';
			var li = $(html).click((function(n){
				return function(){
					show_img.show_special_img(n-1);
				};
			})(i));
			$(show_img.num_list).append(li);
		}
	}
	function do_fade(now_index,next_index){
		$(show_img.img_list[now_index]).
			fadeOut(show_img.defaults.speed);
		//alert(show_img.defaults.current_img);
		$(show_img.img_list[next_index]).
			fadeIn(show_img.defaults.speed);
	}
	function do_slide(now_index,next_index){
		$(show_img.img_list[now_index]).
			slideUp(show_img.defaults.speed);
		//alert(show_img.defaults.current_img);
		$(show_img.img_list[next_index]).
			slideDown(show_img.defaults.speed);
	}
	function do_effect(now_index,next_index){
		switch(show_img.defaults.mode){
			case 1:
				do_fade(now_index,next_index);
			case 2:
				do_slide(now_index,next_index);
		}		
		$($(show_img.num_list).find('li')[now_index	]).
			removeClass('hover');
		$($(show_img.num_list).find('li')[next_index]).	
			addClass('hover');
	}
	show_img.next_img = function(){
		show_img.show_special_img(show_img.defaults.current_img+1);
	}
	show_img.back_img = function(){
		show_img.show_special_img(show_img.defaults.current_img-1);
	}
	show_img.show_special_img = function(i){
		do_next();
		var now_index = show_img.defaults.current_img;
		var next_index = i;
		if(next_index<0){
			next_index = show_img.defaults.img_length-1;
		}
		if(next_index == show_img.defaults.img_length){
			next_index = 0;
		}		
		show_img.defaults.current_img = next_index;
		do_effect(now_index,next_index);
	}
	show_img.play = function(){
		clearTimeout(timer);
		show_img.defaults.play = 1;
		do_next();
	}
	show_img.pause = function(){
		clearTimeout(timer);
		show_img.defaults.play = 0;
	}
	show_img.show_number_list = function(){
		show_img.defaults.number_list = 1;
		$(show_img.num_list).css('display','block');
	}
	show_img.hide_number_list = function(){
		show_img.defaults.number_list = 0;
		$(show_img.num_list).css('display','none');
	}
	show_img.show_number_text = function(){
		show_img.defaults.number_text = 1;
		$(show_img.num_list).find('span.number_text').css('display','block');
	}
	show_img.hide_number_text = function(){
		show_img.defaults.number_text = 0;
		$(show_img.num_list).find('span.number_text').css('display','none');
	}
	show_img.set_fade = function(){
		show_img.defaults.mode = 1;
	}
	show_img.set_slide = function(){
		show_img.defaults.mode = 2;
	}
	// initial value
	show_img.defaults = {
		"pause_speed" : 2000,//停顿速度
		"speed" : 2000, //缓动速度
		"play" : 1,//自动播放
		"bg_light" : 0,//背光,0:禁用,1:黑色,2:白色
		"mode" : 1,//过渡缓动, 1:fade,2:slide
		"thumb" : 0,//是否显示缩略图 ,功能尚未添加
		"number_text" : 0,//是否显示列表中的数字
		"number_list" : 0,//是否显示列表
		"current_img" : 0,//当前图片
//		"next_img" : 1,//下一张耀显示的图片
		"img_length" : 0//图片总数
	};
	$.fn.show_img = show_img;
})(jQuery);

打包下载:

js.zip (696.8 KB)
下载次数: 26

分享到：

js 图片延迟加载 lazy_ load 0.2 | if ie6

2012-03-27 16:19
浏览 3013
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 展示图片/焦点图插件 show_img-1.1

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 展示图片/焦点图 插件 show_img-1.1

评论

发表评论

相关推荐

js 图片延迟加载 lazy_ load 0.2

if ie6

setTimeout 和 setInterval 无法传参

Ajax与IE6缓存问题

表单不缓存

div+css 什么时候用 table什么时候用

设置页面不缓存

简单的封装了一下ajax通信..

js call 用法<转>

图片垂直居中

颜色库....

网上简历投递技巧

ssh

myEclipse 6.5 和 flex3builder 注册码

js中的数组

禁用cookie

<宋词>陆游,秦观

华为在世界通信大会上全球首家展示4G技术

疑惑了..

转自李白

最近访客更多访客>>

jquery 展示图片/焦点图插件 show_img-1.1