<!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=utf-8" />

<title>无标题文档</title>

<style>

*{

	margin:0px;

	padding:0px;

	}

body{

	background:#333;

	}

.wrap{

	width:400px;

	height:600px;

	position:relative;

	border:1px #CCCCCC 5px;

	margin-top:20px;

	margin-right:60px;

	float:left;

	 }

p,span{

	width:400px;

	height:30px;

	background:#CCC;

	text-align:center;

	position:absolute;

	opacity:0.8;

	line-height:30px;

	}

p{

	top:0px;

	}

span{

	top:600px;

	}

ul{

	position:absolute;

	top:650px;

	left:150px;

	}

ul li{

	display:inline-block;

	cursor:pointer;

	background:#999;

	width:15px;

	height:15px;

	position:relative;

	margin-left:5px;

	}

.mini{

	height:60px;

	width:40px;

	border:2px #FFFFFF solid;

	bottom:25px;

	position:absolute;

	}

.active{

		background:#F60;

		}				

</style>

<script type="text/javascript">

	window.onload = function ()

	{

		fntab('wrap1',['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],['图片1','图片2','图片3','图片4'],'onclick');

		fntab('wrap2',['img/2.jpg','img/3.jpg','img/4.jpg'],['图片2','图片3','图片4'],'onmouseover');

	};

	function fntab(id,arrurl,arrtext,evt)

	{

		var odiv = document.getElementById(id);

		var oul = odiv.getElementsByTagName('ul')[0];

		var oimg = odiv.getElementsByTagName('img')[0];

		var ali = odiv.getElementsByTagName('li');

		var op = odiv.getElementsByTagName('p')[0];

		var ospan = odiv.getElementsByTagName('span')[0];

		var i;

		var num =0;

		for( i = 0; i<arrurl.length; i++)

		{

			oul.innerHTML += '<li></li>';

		}

		//初始化

		ali[num].className = 'active';

		oimg.src = arrurl[num];

		op.innerHTML = (num+1) + '/' + ali.length;

		ospan.innerHTML = arrtext[num];

		for(i = 0;i < ali.length; i++)

		{

			ali[i].index = i;

			ali[i][evt] = function ()

			{

				for( var j = 0;j < ali.length; j++)

				{

					ali[j].className = '';

				}

				ali[this.index].className = 'active';

				oimg.src = arrurl[this.index];

				num = this.index;

				op.innerHTML = (num+1) + '/' + ali.length;

				ospan.innerHTML = arrtext[num];

			};

		}

	};

</script>

</head>

<body>

	<div class="wrap" id="wrap1">

    	<img id="img1" src="img/1.jpg">

        <ul id="ul1">

        </ul>

        <p>正在加载页码...</p>

        <span>正在加载描述信息...</span>

    </div>

    	<div class="wrap" id="wrap2">

    	<img id="img1" src="img/1.jpg">

        <ul id="ul1">

        </ul>

        <p>正在加载页码...</p>

        <span>正在加载描述信息...</span>

    </div>

</body>

</html>

m 调用传参图片切换的更多相关文章

  1. java与js交互，相互调用传参

    随着前端技术的发展与H5的广泛使用,移动端采用native+h5的方式越来越多了,对于Android来说就涉及到java与js的交互,相互调用传参等.下面就来看一下java与js交互的简单demo. ...

  2. Java项目导出为jar包+导出第三方jar包+使用命令行调用+传参

    Java项目导出为jar包+导出第三方jar包+使用命令行调用+传参 一.打包 情况1:不需要向程序传参数,并且程序没有使用第三方jar包 Eclipse上导出jar: 然后选择一个java文件作为入 ...

  3. js addEventListener调用传参函数

    先看这段代码 function abc(key){ console.log(key); } for(let i=0;i<oInput.length;i++){ oInput[i].addEven ...

  4. shell脚本调用传参【转载】

    转自:https://www.cnblogs.com/cisum/p/8010658.html 1.直接使用$0,$1,$2,$3 $0是脚本的名字,就是按顺序来 #!/bin/bash # auth ...

  5. bat文件中调用传参的问题

    https://blogs.msdn.microsoft.com/twistylittlepassagesallalike/2011/04/23/everyone-quotes-command-lin ...

  6. asp.net 通过ajax方式调用webmethod方法使用自定义类传参及获取返回参数

    实体类    public class User    {        public int Id { get; set; }        public string Name { get; se ...

  7. js匿名函数使用&传参

    function () { alert("error"); } //报错:匿名函数不能直接调用 使用 0x01 (function () { alert("Success ...

  8. Python菜鸟之传参

    Python菜鸟之传参 : 看上面enroll( )函数的调用传参 enroll("twiggy","M",city="上海", age=2 ...

  9. 利用WCF与Android实现图片上传并传参

    利用WCF与Android实现图片上传并传参 最近做一个项目后端使用WCF接收Android手机拍照并带其它参数保存到服务器里:刚好把最近学习的WCF利用上,本以为是个比较简单的功能应该很好实现,没想 ...

随机推荐

  1. 托福、雅思和GRE的区别

    托福雅思GRE区别在哪里?对于准备申请美国硕士生的同学们来说,必须了解这一点,才能根据自身实际情况进行有针对性的复习,下面我们来进行详细介绍,为同学们指点迷津. - GRE是由美国教育考试服务处(Ed ...

  2. HDU1263 map二维运用

    #include <iostream> #include <cstdio> #include <cstring> #include <map> #inc ...

  3. 装多个版本jdk后，eclipse无法正常启动

    需要在eclipse.ini中plugins/org.eclipse.equinox.launcher_1.3.0.v20140415-2008.jar后面指定jdk的路径. 指定jdk所在路径 -v ...

  4. OI 知识体系

    OI Training 知识体系结构 初级 1.1 C语言基础 1.1.1 C语言程序结构(A+B Problem) 1.1.2 变量,常量,数据类型,输入与输出 1.1.3 条件语句 1.1.4 循 ...

  5. .h 和 .cpp 切换快捷键设置（转）

    原文转自 https://blog.csdn.net/t163361/article/details/51859274 打开VS后依次选择如下 工具-> 选项-> 环境-> 键盘-& ...

  6. linux下挂载U盘【转】

    转自:http://www.cnblogs.com/yeahgis/archive/2012/04/05/2432779.html 一.Linux挂载U盘:1.插入u盘到计算机,如果目前只插入了一个u ...

  7. Sqlite插入、修改、删除表里面的数据

    转载 2014年05月10日 10:38:21 标签: sqlite3 / 数据库 8688 转自:http://www.cnblogs.com/myqiao/archive/2011/07/13/2 ...

  8. UVA 10912 Simple Minded Hashing

    题意就略了.刚一看被数据吓住了.看到字符要求严格递增.那么如果字串长大于26那必然方案数目为0:同时1+2+3....+24+25+26=351如果大于这个数也是不可能的 令dp[i][j][k]表示 ...

  9. linux题目整理（二）

    1.如何过滤出已知当前目录下oldboy中的所有一级目录(不包含子目录,即只能是一级目录) 方法1:find ./ -type d -maxdepth 1方法2:ls -F方法3:ls -l  | g ...

  10. IIS——MIME介绍与添加MIME类型

    MIME(MultipurposeInternet Mail Extensions)多用途互联网邮件扩展类型.是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会 ...