<!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. for 循环里的i++

    写代码的时间也不短了,今天看快速排序的算法的时候才去更深层次得理解... for (语句 1; 语句 2; 语句 3) {     被执行的代码块 } 语句 1 (代码块)开始前执行 语句 2 定义运 ...

  2. 【Apache Nutch系列】Nutch2.0配置安装异常集锦

    1.java.lang.NoClassDefFoundError: org/apache/hadoop/hbase/HBaseConfiguration Exception in thread &qu ...

  3. 51Nod 1048 整数分解为2的幂 V2

    题目链接 分析: $O(N)$和$O(NlogN)$的做法很简单就不写了...%了一发神奇的$O(log^3n*$高精度$)$的做法... 考虑我们只能用$2$的整次幂来划分$n$,所以我们从二进制的 ...

  4. ubuntu安装mysql报错

    ubuntu换源后安装mysql报错: 原因:版本高,不兼容,只需要还原apt下载源,然后 sudo apt-get install mysql-server即可正常安装mysql

  5. win7 无法启动此程序,因为计算机中丢失glut32.dll

    http://zhidao.baidu.com/link?url=9NZxqCvR7hvmKuVR1dUSdQB-TTv_re-g7lp-xZj5FKII04FnMvIKjFhKv299t6wv5Ht ...

  6. MFC 菜单操作

    在CMainFrame中OnCreate函数中添加下列:(注意在return(0)前添加) 在文件,新建前打钩 法1: GetMenu()->GetSubMenu(0)->CheckMen ...

  7. springBoot Feign

    1.引入依赖包 <!-- 引入关于 eureka-server的依赖 --> <dependency> <groupId>org.springframework.c ...

  8. poj3254（状态压缩DP）

    poj3254 题意 给出一个01矩阵,1表示当前这个位置可以放牛,要求放牛的方案保证牛不能左右或上下相邻,求方案数. 分析 dp[S][i]: 表示到 i 行时的状态S(用二进制数表示),那么状态转 ...

  9. 线段树【SP1043】GSS1 - Can you answer these queries I

    Description 给出了序列\(A_1,A_2,-,A_n\). \(a_i \leq 15007,1 \leq n \leq 50000\).查询定义如下: 查询\((x,y)=max{a_i ...

  10. LCA【bzoj3364】 [Usaco2004 Feb]Distance Queries 距离咨询

    Description  奶牛们拒绝跑马拉松,因为她们悠闲的生活无法承受约翰选择的如此长的赛道．因此约翰决心找一条更合理的赛道,他打算咨询你．此题的地图形式与前两题相同．但读入地图之后,会有K个问题． ...