一个图片轮换显示的实现,使用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 == 0) return;
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>
<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 == 0) return;
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>