m 调用传参图片切换
<!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 调用传参图片切换的更多相关文章
- java与js交互，相互调用传参
随着前端技术的发展与H5的广泛使用,移动端采用native+h5的方式越来越多了,对于Android来说就涉及到java与js的交互,相互调用传参等.下面就来看一下java与js交互的简单demo. ...
- Java项目导出为jar包+导出第三方jar包+使用命令行调用+传参
Java项目导出为jar包+导出第三方jar包+使用命令行调用+传参 一.打包 情况1:不需要向程序传参数,并且程序没有使用第三方jar包 Eclipse上导出jar: 然后选择一个java文件作为入 ...
- js addEventListener调用传参函数
先看这段代码 function abc(key){ console.log(key); } for(let i=0;i<oInput.length;i++){ oInput[i].addEven ...
- shell脚本调用传参【转载】
转自:https://www.cnblogs.com/cisum/p/8010658.html 1.直接使用$0,$1,$2,$3 $0是脚本的名字,就是按顺序来 #!/bin/bash # auth ...
- bat文件中调用传参的问题
https://blogs.msdn.microsoft.com/twistylittlepassagesallalike/2011/04/23/everyone-quotes-command-lin ...
- asp.net 通过ajax方式调用webmethod方法使用自定义类传参及获取返回参数
实体类 public class User { public int Id { get; set; } public string Name { get; se ...
- js匿名函数使用&传参
function () { alert("error"); } //报错:匿名函数不能直接调用 使用 0x01 (function () { alert("Success ...
- Python菜鸟之传参
Python菜鸟之传参 : 看上面enroll( )函数的调用传参 enroll("twiggy","M",city="上海", age=2 ...
- 利用WCF与Android实现图片上传并传参
利用WCF与Android实现图片上传并传参 最近做一个项目后端使用WCF接收Android手机拍照并带其它参数保存到服务器里:刚好把最近学习的WCF利用上,本以为是个比较简单的功能应该很好实现,没想 ...
随机推荐
- vs2012 有效产品密钥
VS2012 有效注册密钥 下载地址:https://www.malavida.com/en/soft/visual-studio-2012/ Microsoft Visual Studio Ulti ...
- SQL 数据库函数
字符串函数 lower(字符串表达式) | select lower('ABCDEF')返回 abcdef | 返回大写字符数据转换为小写的字符表达式. upper(字符串表达式) | select ...
- 10.OpenStack块存储服务
添加块存储服务 安装和配置控制器节点 创建数据库 mysql -uroot -ptoyo123 CREATE DATABASE cinder; GRANT ALL PRIVILEGES ON cind ...
- WebBrowser(超文本浏览框)控件默认使用IE9,IE10的方法
C#和易语言都可以使用该方法来变更默认的的IE版本 该文是通过修改注册表的方法实现,测试的时候发现易语言本身也是采用的这种方法 操作方法 打开注册表 HKEY_LOCAL_MACHINE (or HK ...
- Python基础-列表、元祖
1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 names = ['Alex',"Tenglan",'Eric ...
- [BZOJ1295][SCOI2009]最长距离 最短路+枚举
1295: [SCOI2009]最长距离 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1683 Solved: 912[Submit][Statu ...
- react this.props.form异步执行问题
最近在做一个选择器联动时,碰到this.props.form的异步执行问题,导致选择器一直没有办法联动 如图,选择公司名称后,应该同步刷新门店选择默认值, 但同时又要清空门店选择的上一次记录 就用到了 ...
- [jquery] 给动态生成的元素绑定事件 on方法
用底下的方法尝试了好多次都失败 $('.del').on('click',function(){ alert('aa'); })// 失败!! 终于在准备放弃前看到一篇博文说的方法 $(documen ...
- 第十四届华中科技大学程序设计竞赛 B Beautiful Trees Cutting【组合数学/费马小定理求逆元/快速幂】
链接:https://www.nowcoder.com/acm/contest/106/B 来源:牛客网 题目描述 It's universally acknowledged that there'r ...
- 51nod 1004 n^n的末位数字【快速幂】
1004 n^n的末位数字 题目来源: Author Ignatius.L (Hdu 1061) 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 给出 ...