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

javascript 图片轮换函数化继承

　　本文标签：javascript,图片轮换

<!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="Content-Type" content="text/html; charset=gb2312" /> 
<title>javascript 图片轮换</title> 
</head> 
<body> 
<style type="text/css"> 
body,ul,li{ margin:0; padding:0;} 
#div{width:610px;height:210px;overflow:hidden;} 
#photo li{height:210px; overflow:hidden; background:#fff url(001.gif) no-repeat center center;} 
#photo2 li{height:210px; overflow:hidden; background:#fff url(001.gif) no-repeat center center;} 
.number-warp{position:absolute;margin-top:-50px;width:600px; text-align:right;} 
.number-warp a{border:1px solid #CCC; width:30px; height:30px; display:inline-block; height:100%;margin-left:5px; text-align:center; text- 
decoration:none;} 
.sel{background:#CCC;} 
</style> 
<div style="width:610px;height:210px;overflow:hidden; margin:10px; border:1px solid #000;"> 
<div id="div"> 
<ul id="photo" style="margin-top:0px;"> 
<li><img src="http://files.jb51.net/demoimg/201005/r_img1.jpg" /></li> 
<li><img src="http://files.jb51.net/demoimg/201005/r_img2.jpg" /></li> 
<li><img src="http://files.jb51.net/demoimg/201005/r_img3.jpg" /></li> 
<li><img src="http://files.jb51.net/demoimg/201005/r_img4.jpg" /></li> 
<li><img src="http://files.jb51.net/demoimg/201005/r_img5.jpg" /></li> 
</ul> 
</div> 
<div class="number-warp" id="number"> 
1 
2 
3 
4 
5 
</div> 
</div> 
<div style="width:610px;height:210px;overflow:hidden; margin:10px; border:1px solid #000;"> 
<div id="div"> 
<ul id="photo2" style="margin-top:0px;"> 
<li><img src="http://files.jb51.net/demoimg/201005/r_img1.jpg" /></li> 
<li><img src="http://files.jb51.net/demoimg/201005/r_img2.jpg" /></li> 
<li><img src="http://files.jb51.net/demoimg/201005/r_img3.jpg" /></li> 
<li><img src="http://files.jb51.net/demoimg/201005/r_img4.jpg" /></li> 
</ul> 
</div> 
<div class="number-warp" id="number2"> 
1 
2 
3 
4 
</div> 
</div> 
<script type="text/javascript"> 
var Extend = function(destination, source) { 
for (var property in source) { 
destination[property] = source[property]; 
} 
return destination; 
} 
var photo=function(spec){ 
var $=function(id){ 
return document.getElementById(id); 
}, 
_this={}, 
a=document.getElementById(spec["number"]).getElementsByTagName("A"), 
my={ 
$:"", 
change:-210, 
d:50, 
num:3, 
au:true, 
index:0,x:null,v:null 
}, 
tween=function(t,b,c,d){ 
return -c*(t/=d)*(t-2)+b; 
}, 
autoo=function(){ 
_this.show( my.index+1 > my.num ? 0 : my.index+1); 
}; 
Extend(my,spec)//用他更好一点 
for(var i=0 ;i 
</body> 
</html>

技术文章快速查找

js传参数受特殊字符影响错误的解决方法

javascript 倒排序方法

利用JQuery为搜索栏增加tag提示

基于jquery的一个浮动框(扩展性比较好 )

JavaScript中的Navigator浏览器对象

XMLHTTP 乱码的解决方法（UTF8,GB2312 编码解码）

iframe 上下滚动条如何默认在下方实现原理

用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)

相关下载

在线教程导航

软件应用
·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
网络技术
·网站运营	·网络安全	·网络搭建

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

javascript 图片轮换 函数化继承

javascript 图片轮换函数化继承