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

最新推荐文章于 2023-10-10 18:24:08 发布
最新推荐文章于 2023-10-10 18:24:08 发布
阅读量489 收藏
点赞数
分类专栏： html/js/css 点滴 文章标签： javascript xhtml ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzbczq/article/details/84176092
版权
演示文档
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);


打包下载:
jQuery-选择器-筛选器-元素增加删除-属性样式-事件-动画-插件
weixin_57218747的博客
05-12 1393
jQuery 一 jQuery 的基础 1.1 jQuery 的版本 不同的开发版本 jquery.js 开发版（不压缩） jquery.min.js 产品版（压缩过） jquery.slim.js 简化版（去掉了动画功能和ajax功能） https://www.bootcdn.cn/ 版本号 1.x.x 兼容IE6~IE8 2.x.x 和 3.x.x 需要 IE9 以上浏览器支持 1.2 如何使用 jQuery 需要把 jQuery 文件导入到 html 中，自己写的 js 代码需要在 jQuery
jQuery
weixin_45756606的博客
06-29 562
​ JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。​ 常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。​ jQuery总体概况如下 :jQu
jquery.luara焦点图插件
08-29
一款支持3种不同切换效果的jQuery焦点图插件。演示地址：http://www.datouwang.com/jiaoben/256.html
简洁好用的jquery 焦点图插件：Basic jQuery Slider
01-10 1724
简洁好用的jquery 焦点图插件：Basic jQuery Slider
分享8个常用的jQuery焦点图插件
weixin_34417814的博客
12-26 161
现在web网页jquery应用越来越广泛，目前几乎每一个WEB项目都在使用jQuery，因为jQuery插件实在太丰富，尤其是一些图片滑块插件和jQuery焦点图插件，更是多如牛毛，很多初学者只需稍微修改就可以使用。本文精选了8款比较强大的jQuery焦点图插件，希望对读者有所帮助。 1、jQuery动画焦点图 可自动播放图片 这是一款最基础的jQuery焦点图插件，包括切换的动画也是最基本的...
JQuery 定时操作实现图片显示与隐藏
qq_41566772的博客
10-31 1665
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquery-1.8.3.js"
jquery实现多屏多图焦点图切换特效的方法
12-09
【jQuery实现多屏多图焦点图切换特效】是一种常见的网页动态效果，用于展示一组图片或内容，通过自动或手动切换，使用户能够轻松浏览多个项目。这种特效在网站的首页、产品展示、新闻滚动等场景中广泛应用，可以提高...
Ubuntu下编译CPP动态链接库及使用方法
sunzhao1000的博客
03-27 2058
【任务描述】CPP开发了一些功能，打包成so文件对外发布，并且调用这个so文件。 自己写了两个小功能（1）show_img和（2）print_string；就是调用opencv的imread函数将图像读到内存并，以及打印输入的字符串。 将这两个小功能分别封装成动态链接库文件，并在另一个main函数中调用他们。 【一、文件目录】 如下图所示，show_img文件夹包括：实现show_img.h和show_img.cpp文件，以及CMakeLists.txt文件（编译so库），build文件夹是防止编译
基于Python查找图像中最常见的颜色
小白学视觉
11-08 3600
点击上方“小白学视觉”，选择加"星标"或“置顶”重磅干货，第一时间送达如果我们能够得知道一幅图像中最多的颜色是什么的话，可以帮助我们解决很多实际问题。例如在农业领域中想确...
matplotlib 里的 imgshow() 函数
最新发布
一只通信仔的博客
10-10 350
介绍 matplotlib 里的 imgshow() 函数
人脸识别项目实战
zhangzhoubin666的博客
11-25 1181
主要是对于图像和视频的基本操作以及人脸识别实战
Python用PIL的Image.show()函数，图片无法显示，报错
weixin_41852927的博客
08-23 1万+
今天就碰到了这个情况。 报错内容是，需要关联默认程序什么的 我网上搜索了一下，很多复杂的解决方案，甚至需要到show这个库里面去改代码。 后来摸索了一下，发现是这个问题： 图片处理，都会先变成bmp模式，平时一般很少用.bmp属性的照片，那么windows就没有关联到这个属性图片的默认打开程序。 所以，打开画图板，随便画点什么，另存为bmp属性的照片。 然后右键这张照片，选择打开方式–...
Python中show()显示图像报错
weixin_43982422的博客
09-09 6523
Python中使用show()显示图像报错 问题描述： 在使用百度的Notebook学习项目时，将Notebook里的代码（代码如图1）复制到我的Sublime Text编译器后，运行一直报show()方法错误（报错如图2），并且不显示图像。 from PIL import Image import matplotlib.pyplot as plt #显示matplotlib生成的图形 # %matplotlib inline #读取图片 img = Image.open('yushuxin.jpg')
用Python+Moviepy+OpenCV制作灯光秀短视频
老猿Python
04-12 4092
本文完整介绍了用Python+OpenCV+Moviepy制作一个庆祝武汉重启一周年的武汉灯光秀短视频的实现思路、过程、关键函数等，有助于理解OpenCV的图像操作、Moviepy生成视频的实现。
opencv打开图片用到的ShowImage()函数和ResizeImage()函数
dearm23的博客
11-03 6169
void CmymfcDlg::ResizeImage(IplImage* img) { // 读取图片的宽和高 int w = img->width; int h = img->height; // 找出宽和高中的较大值者 int max = (w > h)? w: h; // 计算将图片缩放到TheImage区域所需的比例因子 float scale = (floa
原生js实现jQuery的功能 show()方法实现 (三)
飞天代码的博客
01-29 8014
度娘搜索原生js实现jquery的show，你会发现大部分的回答就是 el.style.display="block"； 一开始我以为是对的，就发布到产品中了，一测试才发现其实该方法远远比想象中的复杂。 比如界面上是2个a标签，而且是在一行的，如果使用上面的语句来显示a标签，会发现a标签换行了，这就说明显示操作不能简单的使用，而且跟标签是行内标签还是块级标签有关联。 完整代码应该如下
jquery自定义插件
luckydog
05-24 1807
实现方法 jQuery为开发插件提拱了两个方法，分别是： jquery.fn.extend(object); 给jquery对象添加方法。 jquery.extend(object); 为扩展jquery类本身.为类添加新的方法，可以理解为添加静态方法。 这两个方法都接受一个参数，类型为Object，Object对应的"名/值对"分别代表"函数或方法体/函数主体"。 html 文件 &l...
浅析image,imagesc,imshow的用法
热门推荐
zhupananhui的专栏
11-15 6万+
1、显示RGB图像 相同点：这三个函数都是把m*n*3的矩阵中的数值当做RGB值来显示的。 区别：imshow将图像以原始尺寸显示，image和imagesc则会对图像进行适当    的缩放，注意这里只是图像显示的尺寸。 2、显示灰度图像 说明：先搞明白什么是索引图像？（灰度图像也是索引图像的一种）   当用Matlab中的imread函数将图像读入并存入矩阵时，我们知道如果是RGB图像
jQuery H5移动端图片预览插件fly-zoom-img
资源摘要信息:"jQuery H5移动端图片预览插件是一个专为移动设备优化的jQuery插件，用于实现图片的放大预览功能。它主要面向移动Web开发，通过简单的配置和调用，可以使移动端用户在浏览网页时获得更加丰富的图片查看...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值