js实现同一页面可多次调用的图片幻灯切换效果

本文实例讲述了js实现同一页面可多次调用的图片幻灯切换效果。分享给大家供大家参考。具体实现方法如下：
复制代码代码如下:<！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>
<title>js同一页面可多次调用的图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<！--把下面代码加到<head>与</head>之间-->
<script language="javascript">
//声明命名空间
var $o = new Object（）;
//基础方法
$o.base = {
e:function（a,f）{
for（var i=0,j=a.length;i<j;i++）{f.call（a[i],i）;}
}
}
$o. slide = function （id,arg）{
var arg = arg||{},
t = document.getElementById（id）,
a = t.getElementsByTagName（"a"）,
lis = [],
cl = arg.color||"#f30",
ctm = arg.time*1000||2000,
w = t.clientWidth,
h = t.clientHeight,
b = ["<ul style="margin:0; padding:0; list-style:none; display:block; position:absolute; bottom:10px; right:10px;">"],
index = 0,
$ = null,
$ = null;
function change（i）{
   if（！！$）{clearTimeout（$）;}
   index = ！isNaN（i）?i:index+1;
   if（index >= a.length）{index = 0;}
   $o.base.e（lis,function（k）{if（k == index）{c（1,this）;}else{c（0,this）}}）;
   var to = - index*h;
   if（a[0].offsetTop == to）{
    return;
   }else{
    if（！！$）{clearInterval（$）;}
    $ = setInterval（function（）{
     var ot = a[0].offsetTop;
     v = Math[to<ot?"floor":"ceil"]（（to - ot）*0.2）;
     if（ot == to）{clearInterval（$）;$=null;st（）;}
     ot += v;
     a[0].style.marginTop = ot + "px";
    },30）
   };
}
function c（b,o）{
   o.style.backgroundColor = ！！b?cl:"#fff";
   o.style.color = ！！b?"#fff":cl;
}
function st（）{
   if（！！$）clearTimeout（$）;
   $ = setTimeout（function（）{change（）},ctm）;
}
with（t.style）{overflow = "hidden";position = "relative";}
$o.base.e（a,function（n）{
   this.style.display = "block";
   with（this.firstChild.style）{borderWidth = "0";width = w + "px";height = h + "px";}
   b.push（"<li style="width:20px; height:20px; line-height:20px; display:block; float:left; margin-left:5px; border:1px solid " + cl + "; background-color:#fff; color:" + cl +"; font-size:14px; text-align:center; cursor:pointer;">" + （n+1） + "</li>"）;
}）;
b.push（"</ul>"）;
t.innerHTML += b.join（""）;
lis = t.getElementsByTagName（"li"）;
$o.base.e（lis,function（n）{
   if（n == index）{c（1,this）}
   this.onmouseover = function（）{
    if（n！=index）change（n）;
   }
}）;
st（）;
}
</script>
</head>
<body>
<！--把下面代码加到<body>与</body>之间-->
<div id="aa" style="width:402px;height:228px;">
<a href="javascript:alert（"1"）"><img src="/images/1.jpg"></a>
<a href="javascript:alert（"2"）"><img src="/images/2.jpg"></a>
<a href="javascript:alert（"3"）"><img src="/images/3.jpg"></a>
<a href="javascript:alert（"4"）"><img src="/images/4.jpg"></a>
<a href="javascript:alert（"5"）"><img src="/images/5.jpg"></a>
<a href="javascript:alert（"6"）"><img src="/images/6.jpg"></a>
<a href="javascript:alert（"7"）"><img src="/images/7.jpg"></a>
<a href="javascript:alert（"8"）"><img src="/images/8.jpg"></a>
<a href="javascript:alert（"9"）"><img src="/images/9.jpg"></a>
</div>
<script language="javascript">
new $o.slide（"aa"）;
</script>
<br>
<div id="bb" style="width:402px;height:228px;">
<a href="###"><img src="/images/1.jpg"></a>
<a href="###"><img src="/images/2.jpg"></a>
<a href="###"><img src="/images/3.jpg"></a>
<a href="###"><img src="/images/4.jpg"></a>
<a href="###"><img src="/images/5.jpg"></a>
</div>
<script language="javascript">
new $o.slide（"bb",{color:"#000",time:0.2}）;
</script>
<br>
<div id="cc" style="width:402px;height:228px;">
<a href="###"><img src="/images/1.jpg"></a>
<a href="###"><img src="/images/2.jpg"></a>
<a href="###"><img src="/images/3.jpg"></a>
<a href="###"><img src="/images/4.jpg"></a>
<a href="###"><img src="/images/5.jpg"></a>
</div>
<script language="javascript">
new $o.slide（"cc",{color:"green"}）;
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。