<!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. 【Error】Python：UnicodeDecodeError: ‘XXX' codec can't decode bytes in position... 解决方法

    错误信息: UnicodeDecodeError: ‘XXX' codec can't decode bytes in position 2-5: illegal multibyte sequence ...

  2. Windows获取FSMO角色

    获取 FSMO 角色若要使用 Ntdsutil 实用工具获取 FSMO 角色,请按照下列步骤操作:1.登录到基于 Windows 2000 Server 或 Windows Server 2003 的 ...

  3. bzoj4897 [Thu Summer Camp2016]成绩单

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4897 [题解] 第一次看这题想的是f[l,r]的区间dp发现仅记录这两个好像不能转移啊 会出 ...

  4. HDU 5245 Joyful(概率题求期望)

    D - Joyful Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit S ...

  5. 杭电oj2032、2040、2042、2054、2055

    2032  杨辉三角 #include <stdio.h> int main(){ ][],i,j,n; while(~scanf("%d",&n)){ ;i& ...

  6. eclipse 导出burpsuite插件包含第三方lib包

    第一步:右键项目点击export: 2.选择Runable JAR file: 点击Finish后会爆出一个错误(Jar export finished with problems. See deta ...

  7. undefined reference to XXX 问题原因

    原文地址:http://blog.csdn.net/cserchen/article/details/5503556 Linux下编译程序时,经常会遇到“undefined reference to ...

  8. 读取文本文件时<U+FEFF> 导致的奇怪问题

    项目中经常会从一些文本文件中读取数据进行业务处理,最近遇到一个问题,另外一个部门提供一个txt文本给我们进行业务处理,当我们使用字符流读取文本之后,处理时,发现第一行数据无法匹配,其他数据可以正常处理 ...

  9. Laravel中setAttribute和queryScope的用法

    setAttribute使用场景: 数据在存入数据库的时候需要进行预先处理,每次都会写很多重复代码,使用 setAttribute之后就可以在数据填充时自动完成. setAttribute的写法:se ...

  10. [BZOJ1018][SHOI2008]堵塞的交通traffic 线段树维护连通性

    1018: [SHOI2008]堵塞的交通traffic Time Limit: 3 Sec  Memory Limit: 162 MB Submit: 3795  Solved: 1253 [Sub ...