<img src="" />

<span>数量正在加载中……</span>

<p>文字说明正在加载中……</p>

<ul></ul>

</div>

<div>

<img src="" />

<span>数量正在加载中……</span>

<p>文字说明正在加载中……</p>

<ul></ul>

</div>

复制代码

css样式：

复制代码

<style>

ul { padding:0; margin:0; }

li { list-style:none; }

.box { width:400px; height:500px; position:relative;

float: left;margin-right:60px; background:url(img/loader_ico.gif) no-repeat center #fff; }

.box img { width:400px; height:500px; }

.box ul { width:40px; position:absolute; top:0; right:-50px; }

.box li { width:40px; height:40px; margin-bottom:4px; background:#666; }

.box .active { background:#FC3; }

.box span { top:0; }

.box p { bottom:0; margin:0; }

.box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }

</style>

复制代码

js代码：

复制代码

<script>

window.onload = function(){

fnTab("pic1",["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"],["图1","图2","图3","图4"],"onclick");

fnTab("pic2",["img/pic4.jpg","img/pic2.jpg","img/pic1.jpg","img/pic4.jpg"],["图4","图2","图3","图1"],"onmou搜索引擎优化ver")

};

function fnTab(id,arrImg,arrPtxt,evt){

var oDiv=document.getElementById(id);

var oImg=oDiv.getElementsByTagName("img")[0];

var oUl=oDiv.getElementsByTagName("ul")[0];

var aLi=oUl.getElementsByTagName("li");

var oSpan=oDiv.getElementsByTagName("span")[0];

var oPtxt=oDiv.getElementsByTagName("p")[0];

var num=0;

//在ul里追加li，，li的数量即是数组的长度

for(var i=0;i<arrImg.length;i++){

oUl.innerHTML += "<li></li>";

}

//初始化

function fn(){

oImg.src=arrImg[num];

oPtxt.innerHTML=arrPtxt[num];

oSpan.innerHTML=1+num+"http://www.mamicode.com/"+arrImg.length;

for(var i=0;i<aLi.length;i++){

aLi[i].className="";

}

aLi[num].className="active"

}

fn();

for(var i=0;i<aLi.length;i++){//循环li

aLi[i].index=i;//索引值，当前li即是i

aLi[i][evt]=function(){

num = this.index;

fn();

}

}

}

</script>

JS函数传参实例应用，多组图片切换实例