本文實例講述了js實作同一頁面可多次呼叫的圖片幻燈切換效果。分享給大家供大家參考。具體實作方法如下： 複製程式碼 程式碼如下: js同一页面可多次调用的图片幻灯切换效果 <br> //声明命名空间<br> var $o = new Object();<br> //基础方法<br> $o.base = {<br> e:function(a,f){<br> for(var i=0,j=a.length;i<j;i++){f.call(a[i],i);}<br /> }<br /> }<br /> $o. slide = function (id,arg){<br /> var arg = arg||{},<br /> t = document.getElementById(id),<br /> a = t.getElementsByTagName("a"),<br /> lis = [],<br /> cl = arg.color||'#f30',<br /> ctm = arg.time*1000||2000,<br /> w = t.clientWidth,<br /> h = t.clientHeight,<br /> b = ['<ul style="margin:0; padding:0; list-style:none; display:block; position:absolute; bottom:10px; right:10px;">'],<br> index = 0,<br> $ = null,<br> $ = null;<br> function change(i){<br> if(!!$){clearTimeout($);}<br> index = !isNaN(i)?i:index+1;<br> if(index >= a.length){index = 0;}<br> $o.base.e(lis,function(k){if(k == index){c(1,this);}else{c(0,this)}});<br> var to = - index*h;<br> if(a[0].offsetTop == to){<br> return;<br> }else{<br> if(!!$){clearInterval($);}<br> $ = setInterval(function(){<br> var ot = a[0].offsetTop;<br> v = Math[to<ot?'floor':'ceil']((to - ot)*0.2);<br /> if(ot == to){clearInterval($);$=null;st();}<br /> ot += v;<br /> a[0].style.marginTop = ot + "px";<br /> },30)<br /> };<br /> }<br /> function c(b,o){<br /> o.style.backgroundColor = !!b?cl:"#fff";<br /> o.style.color = !!b?"#fff":cl;<br /> }<br /> function st(){<br /> if(!!$)clearTimeout($);<br /> $ = setTimeout(function(){change()},ctm);<br /> }<br /> with(t.style){overflow = 'hidden';position = 'relative';}<br /> $o.base.e(a,function(n){<br /> this.style.display = "block";<br /> with(this.firstChild.style){borderWidth = '0';width = w + 'px';height = h + 'px';}<br /> 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>'); <br> });<br> b.push('</ul>');<br> t.innerHTML += b.join("");<br> lis = t.getElementsByTagName("li");<br> $o.base.e(lis,function(n){<br> if(n == index){c(1,this)}<br> this.onmouseover = function(){<br> if(n!=index)change(n);<br> }<br> });<br> st();<br> }<br> 新 $o.slide("aa"); 腳本> new $o.slide("bb",{color:'#000',time:0.2}); 腳本> new $o.slide("cc",{color:'green'}); 腳本> 身體>
