一个图片轮换显示的实现,使用DIV+JS,支持Firefox,IE,Safiri

<div id="container" style="">
    
<div id="subdiv1" style="height:200px;width:200px;position:absolute;top:0px;filter:alpha(opacity=100);moz-opacity: 1"></div>
    
<div id="subdiv2" style="height:200px;width:200px;position:absolute;top:0px;filter:alpha(opacity=0);moz-opacity: 0"></div>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
//从Prototype库抠出来的,版权归Prototype
var Prototype = {
  Version: 
'1.6.0',

  Browser: 
{
    IE:     
!!(window.attachEvent && !window.opera),
    Opera:  
!!window.opera,
    WebKit: navigator.userAgent.indexOf(
'AppleWebKit/'> -1,
    Gecko:  navigator.userAgent.indexOf(
'Gecko'> -1 && navigator.userAgent.indexOf('KHTML'== -1,
    MobileSafari: 
!!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
  }
,

  BrowserFeatures: 
{
    XPath: 
!!document.evaluate,
    ElementExtensions: 
!!window.HTMLElement,
    SpecificElementExtensions:
      document.createElement(
'div').__proto__ &&
      document.createElement(
'div').__proto__ !==
        document.createElement(
'form').__proto__
  }
,

  ScriptFragment: 
'<script[^>]*>([\\S\\s]*?)<\/script>',
  JSONFilter: 
/^\/\*-secure-([\s\S]*)\*\/\s*$/,

  emptyFunction: 
function() { },
  K: 
function(x) return x }
}
;

//透明度间变
//
id:目标引用,step:变化步长可为正或负,currentValue:当前值,targetValue:目标值
function addOpacity(id,step,currentValue,targetValue)
{
    
if(step <0 && currentValue<=targetValue || step >0 && currentValue >= targetValue)
        
return;
    currentValue 
= currentValue + step;
    setOpacity(id,currentValue
/100);
    setTimeout(function(){addOpacity(id,step,currentValue,targetValue);},
        
50);
}

//设置图片透明度
function setOpacity(id,value)
{
    
if(Prototype.Browser.IE) {
         id.filters.alpha.opacity 
= value*100;
    }

    
if(Prototype.Browser.Opera) {
         id.filters.alpha.opacity 
= value*100;
    }

    
if(Prototype.Browser.WebKit) {
        id.style.MozOpacity 
= value;
        id.style.Opacity 
= value;
    }

    
if(Prototype.Browser.Gecko) {
        id.style.MozOpacity 
= value;
        id.style.Opacity 
= value;
    }

    
if(Prototype.Browser.MobileSafari) {
        id.style.MozOpacity 
= value;
        id.style.Opacity 
= value;
    }

}


//开始轮换图片
/*
 * adimages:轮换图片数组
 * curentpos:当前显示的图片序号
 * nextDiv: 轮换div容器,第一个
 * prevDiv: 轮换div容器,上一个
 * timespan: 轮换时间间隔
 
*/

function switchImage(adimages,curentpos,nextDiv,prevDiv,timespan)
{
    
if(adimages && adimages.length == 0return;
    
if(curentpos >= adimages.length)
        curentpos 
= 0;

    nextDiv.innerHTML 
= "<img src='" + adimages[curentpos].imgUrl + "' />";

    addOpacity(prevDiv,
-5,100,0);
    addOpacity(nextDiv,
5,0,100);

    
var temp = prevDiv;prevDiv = nextDiv;nextDiv = temp;

    curentpos
++;
    setTimeout(
function(){switchImage(adimages,curentpos,nextDiv,prevDiv,timespan);},
        timespan);
}

var r = document.getElementById("subdiv1");
var s = document.getElementById("subdiv2");
var imgs = [
    
{'imgUrl':'banner01.jpg',href:''},
    
{'imgUrl':'20083174103502.jpg',href:''}
];
switchImage(imgs,
0,r,s,5000);
//-->
</SCRIPT>
posted @ 2008-06-18 21:11  PointNet  阅读(1500)  评论(0编辑  收藏  举报