软件开发培训班 >> 编程开发 >> JavaScript

来自国外的一款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> 
</head> 
<body> 
<button onclick="Slider.next()">play</button> 
<script type="text/javascript"> 
<!-- 
Slider = { 
isIE : true, 
m_imageSource : [], 
m_selIdx : 0, 
m_direction : 1, 
m_mainviewer : null, 
m_delayTimer : null, 
m_delayTimer1 : null, 
m_curObj : null, 
m_tarObj : null, 
m_inited : false, 
init : function(id, w, h, w1, h1, p, t, s, source){ 
this.isIE = document.all ? true : false; 
this.canvasWidth = w; 
this.canvasHeight = h; 
this.imageWidth = w1; 
this.imageHeight = h1; 
this.m_percent = p; 
this.m_top = t; 
this.m_spaceWidth = s; 
this.writeCanvas(id); 
for(var i=0;i<source.length;i++) 
{ 
this.container.innerHTML += <img src="+source[i]+" border="0" style="+(this.isIE?filter:alpha(opacity=50):opacity:0.5)+;width:+w1+px;height:+h1+px;position:absolute;left:+(i*w1+i*this.m_spaceWidth)+px;top:+this.m_top+px;" index="+i+"/>; 
} 
this.m_mainviewer = this.container.firstChild.cloneNode(true); 
this.bind(); 
this.start(); 
}, 
writeCanvas : function(id) 
{ 
document.write(<div id="+id+" style="width:+this.canvasWidth+px;height:+this.canvasHeight+px;position:relative;overflow:hidden;background-color:black"></div>); 
this.container = document.getElementById(id); 
}, 
bind : function(obj, evt, fun){ 
var obj = this.container; 
for(var i=0;i<obj.childNodes.length;i++) 
{ 
this.attachEvent(this.container.childNodes[i], "mouseover", this.mouseover); 
this.attachEvent(this.container.childNodes[i], "mouseout" , this.mouseout); 
this.attachEvent(this.container.childNodes[i], "click" , this.click); 
} 
}, 
attachEvent : function(obj, evt, fun){ 
if (Slider.isIE) 
{ 
obj.attachEvent("on"+evt, fun) 
}else 
{ 
obj.addEventListener(evt, fun, false); 
} 
}, 
mouseover : function(e) 
{ 
if(!e)e=window.event; 
var obj = e.srcElement || e.target; 
if (Slider.isIE) 
{ 
obj.style.filter = "alpha(opacity=80)"; 
}else{ 
obj.style.opacity = "0.8"; 
} 
}, 
mouseout : function(e) 
{ 
if(!e)e=window.event; 
var obj = e.srcElement || e.target; 
if (Slider.isIE) 
{ 
obj.style.filter = "alpha(opacity=50)"; 
}else{ 
obj.style.opacity = "0.5"; 
} 
}, 
click : function(e) 
{ 
if(!e)e=window.event; 
var obj = e.srcElement || e.target; 
var mobj = Slider.m_mainviewer; 
Slider.m_selIdx = obj.getAttribute("index"); 
Slider.m_curObj = Slider.m_mainviewer; 
Slider.m_tarObj = obj; 
Slider.m_delayTimer = Slider.fadeIn(200,5); 
}, 
start : function(){ 
var obj = this.m_mainviewer; 
if (Slider.isIE) 
{ 
obj.style.filter = "alpha(opacity=100)"; 
}else{ 
obj.style.opacity = "1"; 
}

this.container.appendChild(this.m_mainviewer); 
this.m_mainviewer.style.width = parseInt(this.m_mainviewer.style.width)*(1+this.m_percent)+"px"; 
this.m_mainviewer.style.height = parseInt(this.m_mainviewer.style.height)*(1+this.m_percent)+"px"; 
this.m_curObj = this.container.childNodes[this.m_selIdx]; 
this.m_tarObj = this.m_mainviewer; 
if(this.m_delayTimer)clearInterval(Slider.m_delayTimer); 
this.m_delayTimer = this.fadeIn(200,5); 
}, 
next : function(){ 
var obj = this.container; 
var mobj = this.m_mainviewer; 
if(this.m_selIdx == obj.childNodes.length-2) 
{ 
this.m_direction = -1; 
} 
if(this.m_selIdx == 0) 
{ 
this.m_direction = 1; 
} 
Slider.m_curObj = mobj; 
Slider.m_tarObj = obj.childNodes[this.m_selIdx]; 
this.m_delayTimer = this.fadeIn(200,5); 
mobj.src = obj.childNodes[this.m_selIdx].src; 
if(this.m_direction==-1){ 
this.m_selIdx --; 
}else{ 
this.m_selIdx ++; 
} 
}, 
fadeIn : function(aa, ab){ 
var obj = this.container; 
with(this.m_curObj.style){var t1 = parseInt(left);var t3 = parseInt(width);var t4 = parseInt(height);var t5 = parseInt(top);} 
if (Slider.m_inited) 
{ 
var k1 = (t1 - (this.canvasWidth- parseInt(this.m_curObj.style.width))/2)/ab; 
var k3 = (t3-parseInt(this.m_tarObj.style.width))/ab; 
var k4 = (t4-parseInt(this.m_tarObj.style.height))/ab; 
var k5 = (t5 - parseInt(this.m_tarObj.style.top))/ab; 
}else{ 
var k1 = (t1 - (this.canvasWidth- this.imageWidth*(1+this.m_percent))/2)/ab; 
var k3 = (t3- this.imageWidth*(1+this.m_percent))/ab; 
var k4 = (t4 - this.imageHeight*(1+this.m_percent))/ab; 
var k5 = (this.imageHeight * this.m_percent/2)/ab; 
} 
var mobj = this.m_mainviewer; 
return setInterval(function(){if(ab<1){ 
clearInterval(Slider.m_delayTimer); 
if(Slider.m_inited){ 
if (!Slider.m_fadein) 
{ 
Slider.m_curObj = obj.childNodes[Slider.m_selIdx]; 
Slider.m_tarObj = mobj; 
mobj.src = obj.childNodes[Slider.m_selIdx].src; 
Slider.m_fadein = true; 
Slider.m_inited = false; 
Slider.m_delayTimer = Slider.fadeIn(200,10); 
}else{ 
Slider.m_fadein = false; 
Slider.m_inited = true; 
} 
} 
Slider.m_inited = true; 
return; 
} 
ab--;t1-=k1;t3-=k3;t4-=k4;t5-=k5; 
if (Slider.m_fadein) 
{ 
for(var i=0;i<obj.childNodes.length-1;i++) 
{ 
obj.childNodes[i].style.left = (parseInt(t1) + (Slider.imageWidth + Slider.m_spaceWidth)*(i-Slider.m_selIdx))+"px"; 
}

} 
with(mobj.style){left = t1 + "px";top = t5 + "px";width = t3 + "px";height = t4 + "px";} 
} 
,aa/ab) 
} 
} 
Slider.init(aaa,400,600,180,100, 0.5, 200, 20, [ 
"http://files.jb51.net/demoimg/201005/r_s1.jpg", 
"http://files.jb51.net/demoimg/201005/r_s2.jpg", 
"http://files.jb51.net/demoimg/201005/r_s3.jpg", 
"http://files.jb51.net/demoimg/201005/r_s4.jpg", 
"http://files.jb51.net/demoimg/201005/r_s1.jpg", 
"http://files.jb51.net/demoimg/201005/r_s2.jpg", 
"http://files.jb51.net/demoimg/201005/r_s3.jpg", 
"http://files.jb51.net/demoimg/201005/r_s4.jpg" 
]); 
//--> 
</script> 
</body> 
</html>

技术文章快速查找

JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结

JS清空多文本框、文本域示例代码

如何设置iframe高度自适应在跨域情况下的可用方法

javascript阻止scroll事件多次执行的思路及实现

JS操作JSON详细总结

动态加载jquery库的方法

Javascript面向对象之四继承

JavaScript动态创建div属性和样式示例代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建