高仿FLASH全屏多图片幻灯效果

作者：迷失的宇　来源：ASP急救中心　浏览：添加日期：2010-12-20 　我要评论( )

[导读]高仿FLASH全屏多图片幻灯效果

<!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>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<title>高仿FLASH全屏多图片幻灯效果</title>
<style type="text/css">
body{margin:0;padding:0; background : #000 ;  color : #ccc ; width : 100%; height : 100%; overflow:hidden；cursor:hand}
#cover{width : 100%; overflow:hidden;position:relative ;  }
#cover img{ position:absolute;left:0;top:0 ; opacity:0.1}
#leftbtn{ position:absolute; left : 0 ;top:40% ;       background: url("http://www.ccap168.cn/d/demo/flashpic/prev.png") no-repeat scroll left top transparent;
display: block;
height: 51px;
line-height: 51px;
overflow: hidden;
text-indent: -99px;
width: 55px; cursor : pointer ; }
#rightbtn{
position:absolute; right : 0 ;top:40% ;
background: url("http://www.ccap168.cn/d/demo/flashpic/next.png") no-repeat scroll left top transparent;
display: block;
height: 51px;
line-height: 51px;
overflow: hidden;
text-indent: -99px;
width: 55px; cursor : pointer ; }
#thumb { position:absolute ; left:0;bottom:0; height : 100px ;display:none}
#thumb li{float:left;}
#num{position:absolute ; left:5px;bottom:10px;font-size : 24px ; font-family : Arial ; font-weight : bold ;}
#loading{
position:absolute ;
background-image: url("http://www.ccap168.cn/d/demo/flashpic/loader.gif");
background-position: center center;
background-repeat: no-repeat;
width : 100% ;
height : 100px ;
top:40%;
display : none ;
}
</style>
<script language="JavaScript" type="text/javascript">
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", enableAlphaImages);
}
function enableAlphaImages(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
if (itsAllGood) {
for (var i=0; i<document.all.length; i++){
var obj = document.all[i];
var bg = obj.currentStyle.backgroundImage;
var img = document.images[i];
if (bg && bg.match(/\.png/i) != null) {
var img = bg.substring(5,bg.length-2);
var offset = obj.style["background-position"];
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
obj.style.backgroundImage = "url('http://www.ccap168.cn/d/demo/flashpic/touming.gif')";//替换透明PNG的图片
obj.style["background-position"] = offset; // reapply
} else if (img && img.src.match(/\.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
img.src = "http://www.ccap168.cn/d/demo/flashpic/touming.gif";//替换透明PNG的图片
}
}
}
}
(function(){
var isReady=false; //判断onDOMReady方法是否已经被执行过
var readyList= [];//把需要执行的方法先暂存在这个数组里
var timer;//定时器句柄
ready=function(fn) {
if (isReady )
fn.call( document);
else
readyList.push( function() { return fn.call(this);});
return this;
}
var onDOMReady=function(){
for(var i=0;i<readyList.length;i++){
readyList[i].apply(document);
}
readyList = null;
}
var bindReady = function(evt){
if(isReady) return;
isReady=true;
onDOMReady.call(window);
if(document.removeEventListener){
document.removeEventListener("DOMContentLoaded", bindReady, false);
}else if(document.attachEvent){
document.detachEvent("onreadystatechange", bindReady);
if(window == window.top){
clearInterval(timer);
timer = null;
}
}
};
if(document.addEventListener){
document.addEventListener("DOMContentLoaded", bindReady, false);
}else if(document.attachEvent){
document.attachEvent("onreadystatechange", function(){
if((/loaded|complete/).test(document.readyState))
bindReady();
});
if(window == window.top){
timer = setInterval(function(){
try{
isReady||document.documentElement.doScroll('left');//在IE下用能否执行doScroll判断 dom是否加载完毕
}catch(e){
return;
}
bindReady();
},5);
}
}
})();
</script>
</head>
<body>
<div id="loading"></div>
<div id="cover">
</div>
<div id="leftbtn">上一张</div>
<div id="rightbtn">下一张</div>
<div id="num"><span id="curNum">1</span>/<span id="allNum">20</span></div>
<script type="text/javascript">
var $=function(obj){
return document.getElementById(obj)
}
var windowHeight=document.documentElement.clientHeight;
$("cover").style.height=windowHeight+"px";
//读取小图地址载入大图
var imgArray = new Array()
imgArray[0]="http://www.ccap168.cn/d/demo/flashpic/_DSC0001.jpg"
imgArray[1]="http://www.ccap168.cn/d/demo/flashpic/_DSC0002.jpg"
imgArray[2]="http://www.ccap168.cn/d/demo/flashpic/_DSC0003.jpg"
imgArray[3]="http://www.ccap168.cn/d/demo/flashpic/_DSC0004.jpg"
imgArray[4]="http://www.ccap168.cn/d/demo/flashpic/_DSC0005.jpg"
imgArray[5]="http://www.ccap168.cn/d/demo/flashpic/_DSC0006.jpg"
imgArray[6]="http://www.ccap168.cn/d/demo/flashpic/_DSC0007.jpg"
imgArray[7]="http://www.ccap168.cn/d/demo/flashpic/_DSC0008.jpg"
imgArray[8]="http://www.ccap168.cn/d/demo/flashpic/_DSC0009.jpg"
imgArray[9]="http://www.ccap168.cn/d/demo/flashpic/_DSC00010.jpg"
imgArray[10]="http://www.ccap168.cn/d/demo/flashpic/_DSC0011.jpg"
imgArray[11]="http://www.ccap168.cn/d/demo/flashpic/_DSC0012.jpg"
imgArray[12]="http://www.ccap168.cn/d/demo/flashpic/_DSC0013.jpg"
imgArray[13]="http://www.ccap168.cn/d/demo/flashpic/_DSC0014.jpg"
imgArray[14]="http://www.ccap168.cn/d/demo/flashpic/_DSC0015.jpg"
imgArray[15]="http://www.ccap168.cn/d/demo/flashpic/_DSC0016.jpg"
imgArray[16]="http://www.ccap168.cn/d/demo/flashpic/_DSC0017.jpg"
imgArray[17]="http://www.ccap168.cn/d/demo/flashpic/_DSC0018.jpg"
imgArray[18]="http://www.ccap168.cn/d/demo/flashpic/_DSC0019.jpg"
imgArray[19]="http://www.ccap168.cn/d/demo/flashpic/_DSC0020.jpg"
imgArray[20]="http://www.ccap168.cn/d/demo/flashpic/_DSC0021.jpg"
imgArray[21]="http://www.ccap168.cn/d/demo/flashpic/_DSC0022.jpg"
imgArray[22]="http://www.ccap168.cn/d/demo/flashpic/_DSC0023.jpg"
imgArray[23]="http://www.ccap168.cn/d/demo/flashpic/_DSC0024.jpg"
imgArray[24]="http://www.ccap168.cn/d/demo/flashpic/_DSC0025.jpg"
imgArray[25]="http://www.ccap168.cn/d/demo/flashpic/_DSC0026.jpg"
imgArray[26]="http://www.ccap168.cn/d/demo/flashpic/_DSC0027.jpg"
imgArray[27]="http://www.ccap168.cn/d/demo/flashpic/_DSC0028.jpg"
imgArray[28]="http://www.ccap168.cn/d/demo/flashpic/_DSC0029.jpg"
imgArray[29]="http://www.ccap168.cn/d/demo/flashpic/_DSC0030.jpg"
imgArray[30]="http://www.ccap168.cn/d/demo/flashpic/_DSC0031.jpg"
var num=0;
$("allNum").innerHTML=imgArray.length;
//设置透明度
var _opacity=0;
function fadein(obj){
_opacity+=15;
if(document.all){
obj.style.filter= "Alpha(opacity="+_opacity+")";
}
else{
obj.style.opacity=_opacity/100;
}
var set=setTimeout(function(){fadein(obj)},55)
if(_opacity>=100){ clearTimeout(set);_opacity=0; }
}
function imgready(event,nextimgobj){
$("loading").style.display="none";
$("cover").innerHTML="";
$("cover").appendChild(nextimgobj);
var event=event||window.event;
nextimgobj.style.left=-event.clientX*((nextimgobj.width-$("cover").offsetWidth)/$("cover").offsetWidth)+"px";
nextimgobj.style.top=-event.clientY*((nextimgobj.height-$("cover").offsetHeight)/$("cover").offsetHeight)+"px";
$("cover").onmousemove=function (event){
var event=event||window.event;
nextimgobj.style.left=-event.clientX*((nextimgobj.width-this.offsetWidth)/this.offsetWidth)+"px";
nextimgobj.style.top=-event.clientY*((nextimgobj.height-this.offsetHeight)/this.offsetHeight)+"px";
}
}
//下一张
$("rightbtn").onclick=function (event){
num++;
if(num>=imgArray.length){
num=0
}
var nextimgobj=new Image();
nextimgobj.src=imgArray[num];
var nextimgobj2=new Image();
nextimgobj2.src=imgArray[num+1];
//获取数组下标为当前图片索引
for(i=0;i<=imgArray.length;i++)
{
if(imgArray[i]==imgArray[num])
{
$("curNum").innerHTML=i+1;
}
}
$("cover").innerHTML="";
$("loading").style.display="block";
//ie
var appname = navigator.appName.toLowerCase();
if (appname.indexOf("netscape") == -1)
{
if(nextimgobj.readyState == "complete")
{
imgready(event,nextimgobj);
fadein(nextimgobj)
}
nextimgobj.onreadystatechange = function () {
if(nextimgobj.readyState == "complete")
{
imgready(event,nextimgobj);
fadein(nextimgobj)
}
};
}
else{
//ff
nextimgobj.onload=function(){
if (this.complete ==true) {
imgready(event,nextimgobj);
fadein(nextimgobj);
}
}
}
}
//上一张
$("leftbtn").onclick=function(event){
//获取数组下标为当前图片索引
num--;
if(num<0){
num=imgArray.length-1;
}
for(i=0;i<imgArray.length;i++)
{
if(imgArray[i]==imgArray[num])
{$("curNum").innerHTML=i+1;}
}
var nextimgobj=new Image();
nextimgobj.src=imgArray[num];
var nextimgobj2=new Image();
nextimgobj2.src=imgArray[num-1];
$("cover").innerHTML="";
$("loading").style.display="block";
//ie
var appname = navigator.appName.toLowerCase();
if (appname.indexOf("netscape") == -1)
{
if(nextimgobj.readyState == "complete")
{
imgready(event,nextimgobj);
fadein(nextimgobj);
}
nextimgobj.onreadystatechange = function () {
if(nextimgobj.readyState == "complete")
{
imgready(event,nextimgobj);
fadein(nextimgobj);
}
};
}
else{
//ff
nextimgobj.onload=function(){
if (this.complete ==true) {
imgready(event,nextimgobj);
fadein(nextimgobj)
}
}
}
}
ready(function(){
var nextimgobj=new Image();
nextimgobj.src=imgArray[num];
var nextimgobj2=new Image();
nextimgobj2.src=imgArray[num+1];
$("loading").style.display="block";
//ie
var appname = navigator.appName.toLowerCase();
if (appname.indexOf("netscape") == -1)
{
if(nextimgobj.readyState == "complete")
{
$("loading").style.display="none";
$("cover").innerHTML="";
$("cover").appendChild(nextimgobj);
fadein(nextimgobj);
$("cover").onmousemove=function (event){
var event=event||window.event;
nextimgobj.style.left=-event.clientX*((nextimgobj.width-this.offsetWidth)/this.offsetWidth)+"px";
nextimgobj.style.top=-event.clientY*((nextimgobj.height-this.offsetHeight)/this.offsetHeight)+"px";
}
}
nextimgobj.onreadystatechange = function () {
if(nextimgobj.readyState == "complete")
{
$("loading").style.display="none";
$("cover").innerHTML="";
$("cover").appendChild(nextimgobj);
fadein(nextimgobj);
$("cover").onmousemove=function (event){
var event=event||window.event;
nextimgobj.style.left=-event.clientX*((nextimgobj.width-this.offsetWidth)/this.offsetWidth)+"px";
nextimgobj.style.top=-event.clientY*((nextimgobj.height-this.offsetHeight)/this.offsetHeight)+"px";
}
}
};
}
else{
nextimgobj.onload=function(){
if (this.complete ==true) {
$("loading").style.display="none";
$("cover").innerHTML="";
$("cover").appendChild(nextimgobj);
fadein(nextimgobj);
$("cover").onmousemove=function (event){
var event=event||window.event;
nextimgobj.style.left=-event.clientX*((nextimgobj.width-this.offsetWidth)/this.offsetWidth)+"px";
nextimgobj.style.top=-event.clientY*((nextimgobj.height-this.offsetHeight)/this.offsetHeight)+"px";
}
}
}
}
});
</script>
</body>
</html>

提示:可以修改后运行.

文章评论

正在载入评论数据中...

高仿FLASH全屏多图片幻灯效果

作者：迷失的宇　来源：ASP急救中心　浏览：添加日期：2010-12-20 　我要评论( )

Tags:

相关文章

文章评论

相关栏目

推荐文章

最新信息

高仿FLASH全屏多图片幻灯效果

作者：迷失的宇 来源：ASP急救中心 浏览： 添加日期：2010-12-20 我要评论( )

Tags:

相关文章

文章评论

相关栏目

推荐文章

最新信息

作者：迷失的宇　来源：ASP急救中心　浏览：添加日期：2010-12-20 　我要评论( )