您的位置：首页 > 其它

轮播图片切换（函数传参）

2016-04-07 11:02 274 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片切换

相关文章推荐

新的分享

章节导航