<!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. 栅栏涂漆(color)

    栅栏涂漆测评 题目描述 zed 最近总是受到 Farmer 的困扰,因此他在自家的门前插了一排栅栏以防农气的入侵.栅栏由 N 个竖条栅栏横向组成,每个竖条栅栏宽度为 1.过了一段时间,zed 觉得栅栏 ...

  2. C++虚函数表解析(基础篇)

    原文:http://blog.csdn.net/haoel/article/details/1948051 一.简介  C++中的虚函数的作用主要是实现了多态的机制.虚函数(Virtual Funct ...

  3. [洛谷1972][SDOI2009]HH的项链

    题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...

  4. C# Log4Net使用示例

    using log4net; using log4net.Config; using System; using System.IO; namespace Three.Logging { /// &l ...

  5. Vue v-for嵌套数据渲染问题

    Vue v-for嵌套数据渲染问题 问题描述: 由于在获取商品子分类的时候,同时需要获取子分类下的商品,那么多层的列表渲染就只能是第一层好用 问题原因: vue在处理多层的渲染的时候,不能直接用等号赋 ...

  6. 在windows 10 64bit系统上安装python 3.6 64bit的numpy模块

    1.查找自己的python版本对照的whl文件(cp36代表的是版本) 地址:https://pypi.python.org/pypi/numpy 2.下载完毕执行一下命令即可 pip install ...

  7. react 利用react-hammerjs插件实现滑动特效和点击特效

    react-hammerjs是一款由hammer.js的JS插件来实现在react中实现手势滑动的事件插件, 它有各种各样的手势支持效果,这里我们就使用下它最简单的3种效果来实现我们要的动画 分别是点 ...

  8. Codeforces 914D Bash and a Tough Math Puzzle （ZKW线段树）

    题目链接  Round #458 (Div. 1 + Div. 2, combined)  Problem D 题意  给定一个序列,两种询问:单点修改,询问某个区间能否通过改变最多一个数使得该区间的 ...

  9. oracle free space

    --Size of All Table Space --1. Used Space SELECT TABLESPACE_NAME,TO_CHAR(SUM(NVL(BYTES,0))/1024/1024 ...

  10. springboot + 拦截器 + 注解 实现自定义权限验证

    springboot + 拦截器 + 注解 实现自定义权限验证最近用到一种前端模板技术:jtwig,在权限控制上没有用springSecurity.因此用拦截器和注解结合实现了权限控制. 1.1 定义 ...