<!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. nutch2.3.1源码分析——InjectorJob

    InjectorJob实现的功能是:从种子站点文件当中读取站点信息并且将这些站点的个数.url(url以 域名:协议/端口号/路径名 设为形式存储在数据库当中,为了提高读写速度)回写到Context类 ...

  2. UVA 10519 !! Really Strange !!

    //ans=2*n+(n-1)(n-2) n>=2#include <map> #include <set> #include <list> #include ...

  3. 非常好！！！Linux源代码阅读——中断【转】

    Linux源代码阅读——中断 转自:http://home.ustc.edu.cn/~boj/courses/linux_kernel/2_int.html 目录 为什么要有中断 中断的作用 中断的处 ...

  4. docker 解决：Get http:///var/run/docker.sock/v1.19/version: dial unix /var/run/docker.sock: no such file or directory. Are you trying to connect to a TLS-enabled daemon without TLS?

    docker 安装之后,通过命令查看docker相关信息时,可能会出现错误:Get http:///var/run/docker.sock/v1.19/version: dial unix /var/ ...

  5. python每日一类(4)：slice

    class slice(stop)class slice(start, stop[, step]) Return a slice object representing the set of indi ...

  6. hdu 4081(次小生成树)

    Qin Shi Huang's National Road System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/3 ...

  7. poj 1389(离散化+计算几何)

    Area of Simple Polygons Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3412   Accepted ...

  8. Android 各种功能代码收集

    1.分享图片等文件到单个指定微信好友 /** * 分享信息到朋友 * * @param file * 假如图片的路径为path,那么file = new File(path); */ private ...

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

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

  10. Netty源码学习（五）ChannelInitializer

    0. ChannelInitializer简介 直接用ChannelInitializer的注释吧:A special ChannelInboundHandler which offers an ea ...