轮播图片切换(函数传参)
来源:互联网 发布:物业管理收费软件app 编辑:程序博客网 时间:2024/05/16 13:44
<!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:0; padding:0}
li{ list-style:none}
body{ background:#333}
.rolling{ width:400px; height:500px; position:relative; background:#fff; border:1px solid #fff; float:left; margin-right:60px}
.rolling img{ width:400px; height:500px;}
.rolling span,.rolling p{ position:absolute; left:0; background:#000; text-align:center; color:#fff; height:30px; line-height:30px; width:100% }
.rolling span{ top:0}
.rolling p{ bottom:0 }
.rolling ul{ position:absolute; width:30px; top:0; right:-50px}
.rolling ul li{ width:30px; height:30px; background:#ccc; margin-bottom:10px}
.rolling ul li.active{ background:#F60;}
</style>
<script>
/*
重用代码:
1、尽量保证 HTML 代码结构一致,可以通过父级选取子元素
2、把核心主程序实现,用函数包起来
3、把每组里不同的值找出来,通过传参实现
*/
function fnTab(id,arrUrl,arrText,evt){
var oDiv=document.getElementById(id);
var oImg=oDiv.getElementsByTagName('img')[0];
var oSpan=oDiv.getElementsByTagName('span')[0];
var oText=oDiv.getElementsByTagName('p')[0];
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
//初始化
var num=0;
for(var i=0; i<arrUrl.length; i++){
oUl.innerHTML+='<li></li>'
}
function fnTab(){
oImg.src=arrUrl[num];
oText.innerHTML=arrText[num];
oSpan.innerHTML=num+1+'/'+arrUrl.length;
for(var i=0; i<aLi.length; i++){
aLi[i].className='';
}
aLi[num].className='active';
}
fnTab();
for(var i=0; i<aLi.length; i++){
aLi[i].index=i;
aLi[i][evt]=function(){
num=this.index;
fnTab();
}
}
}
window.onload=function(){
fnTab('pic1',['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],['第一张图','第二张图','第三张图','第四张图'],'onclick');
fnTab('pic2',['img/1.jpg','img/2.jpg','img/3.jpg'],['第一张图','第二张图','第三张图'],'onmouseover');
}
</script>
</head>
<body>
<div id="pic1" class="rolling"> <img src="" /> <span>程序正在计算中</span>
<P>图片文字介绍</P>
<ul>
</ul>
</div>
<div id="pic2" class="rolling"> <img src="" /> <span>程序正在计算中</span>
<P>图片文字介绍</P>
<ul>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
li{ list-style:none}
body{ background:#333}
.rolling{ width:400px; height:500px; position:relative; background:#fff; border:1px solid #fff; float:left; margin-right:60px}
.rolling img{ width:400px; height:500px;}
.rolling span,.rolling p{ position:absolute; left:0; background:#000; text-align:center; color:#fff; height:30px; line-height:30px; width:100% }
.rolling span{ top:0}
.rolling p{ bottom:0 }
.rolling ul{ position:absolute; width:30px; top:0; right:-50px}
.rolling ul li{ width:30px; height:30px; background:#ccc; margin-bottom:10px}
.rolling ul li.active{ background:#F60;}
</style>
<script>
/*
重用代码:
1、尽量保证 HTML 代码结构一致,可以通过父级选取子元素
2、把核心主程序实现,用函数包起来
3、把每组里不同的值找出来,通过传参实现
*/
function fnTab(id,arrUrl,arrText,evt){
var oDiv=document.getElementById(id);
var oImg=oDiv.getElementsByTagName('img')[0];
var oSpan=oDiv.getElementsByTagName('span')[0];
var oText=oDiv.getElementsByTagName('p')[0];
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
//初始化
var num=0;
for(var i=0; i<arrUrl.length; i++){
oUl.innerHTML+='<li></li>'
}
function fnTab(){
oImg.src=arrUrl[num];
oText.innerHTML=arrText[num];
oSpan.innerHTML=num+1+'/'+arrUrl.length;
for(var i=0; i<aLi.length; i++){
aLi[i].className='';
}
aLi[num].className='active';
}
fnTab();
for(var i=0; i<aLi.length; i++){
aLi[i].index=i;
aLi[i][evt]=function(){
num=this.index;
fnTab();
}
}
}
window.onload=function(){
fnTab('pic1',['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],['第一张图','第二张图','第三张图','第四张图'],'onclick');
fnTab('pic2',['img/1.jpg','img/2.jpg','img/3.jpg'],['第一张图','第二张图','第三张图'],'onmouseover');
}
</script>
</head>
<body>
<div id="pic1" class="rolling"> <img src="" /> <span>程序正在计算中</span>
<P>图片文字介绍</P>
<ul>
</ul>
</div>
<div id="pic2" class="rolling"> <img src="" /> <span>程序正在计算中</span>
<P>图片文字介绍</P>
<ul>
</ul>
</div>
</body>
</html>
0 0
- 轮播图片切换(函数传参)
- 轮播图片切换(函数合并)
- 轮播图片切换
- 图片轮播(上一幅下一幅+圆点+自动切换)
- 用js实现图片轮播切换(1)
- 表格中TD 图片切换(轮播)
- Android实现图片轮播切换
- js图片轮播手动切换
- JS图片轮播切换效果实现
- <jQuery>首页图片切换/轮播
- js实现图片切换与轮播
- 带数字的图片切换+轮播
- Flexslider图片轮播、文字图片相结合滑动切换效果
- Flexslider图片轮播、文字图片相结合滑动切换效果
- 原生js+css3实现图片自动切换,图片轮播
- H5图片切换,js图片轮播,js图片自动切换
- 轮播插件--Flexslider图片轮播、文字图片相结合滑动切换效果
- ViewPager手势切换页面+图片左右轮播效果(精简版本)
- 从零开始学习OpenWrt完美教程
- C++第3次上机实验
- webservice常用注解总结
- STM32启动过程详解
- 原生JavaScript实现列表/表格的增删查改
- 轮播图片切换(函数传参)
- 关于android动态切换app主题颜色方案
- 复杂的MVP
- Gulp介绍与Hexo优化
- Oracle事务概念
- maven中snapshot快照库和release发布库的区别和作用
- IOS Masonry介绍与使用实践:快速上手Autolayout
- Ubuntu Android Studio 报错unable to run mksdcard sdk
- 量子计算的能够破解RSA加密吗?