详细代码：<!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> ldh_web_editor </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="mfx.css" rel="stylesheet" type="text/css">
<script src="mfx.js"></script>
<style>
#box{
border:1px solid #9599A5;
background:#C4C7D3;
width:628px;
height:150px;
}
#imgPanel{
height:100px;
position:relative;
overflow:hidden;
z-index:1;
}
#ctrlPanel{
border:1px solid #aaa;
background:#fff;
height:30px;
margin:5px;
padding:5px;
position:relative;
z-index:0;
}
img{
position:absolute;
padding:5px;
background:#fff;
border:1px solid #999;
bottom:0px;
left:-999px;
width:200px;
}
#bg{
position:absolute;
width:170px;
height:90px;
border:1px solid #aaa;
border-bottom:none;
background:#fff;
top:-91px;
left:223px;
}
#ctrlPanel button{
width:45px;
line-height:20px;
}
#next{
position:absolute;
top:5px;
right:5px;
}
#adTilte{
position:absolute;
top:8px;
left:100px;
color:#CC0000;
font-size:20px;
font-family:黑体;
}
</style>
</head>
<body>
<div id="box">
<div id="imgPanel">
<img src="http://www.yaohaixiao.com/effects/samples/newscarousel/samples/1.jpg" />
<img src="http://www.yaohaixiao.com/effects/samples/newscarousel/samples/2.jpg" />
<img src="http://www.yaohaixiao.com/effects/samples/newscarousel/samples/3.jpg" />
<img src="http://www.yaohaixiao.com/effects/samples/newscarousel/samples/4.jpg" />
<img src="http://www.yaohaixiao.com/effects/samples/newscarousel/samples/5.jpg" />
<img src="http://www.yaohaixiao.com/effects/samples/newscarousel/samples/6.jpg" />
<img src="http://www.yaohaixiao.com/effects/samples/newscarousel/samples/7.jpg" />
<img src="http://www.yaohaixiao.com/effects/samples/newscarousel/samples/8.jpg" />
<img src="http://www.yaohaixiao.com/effects/samples/newscarousel/samples/9.jpg" />
</div>
<div id="ctrlPanel">
<div id="bg"></div>
<div id="adTilte"> 怎么样来的风 怎么样吹过 </div>
<button id="prev" onclick="BlueJS.prev();"><</button>
<button id="next" onclick="BlueJS.next();">></button>
</div>
</div>
<script>
var curcve=function (t, b, c, d){
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
};
BlueJS={
fx:(function (){
var core=function (el,style,to){
clearInterval(el['fxID_'+style]);
var from=el['offset'+style.charAt(0).toUpperCase()+style.slice(1)];
var set=function (x){el.style[style]=x+'px'},time=360/10,
fx = (function(from, to, timeout, s, a, p) {
var c = to - from,d = timeout,b = from;
return function (){return curcve(t,b,c,d)}
})(from, to, time),
t=0;
el['fxID_'+style]=setInterval(function(){
t++<time?set(fx(t)):set(to,clearInterval(el['fxID_'+style]));
},10);
};
return function (el,set){for (var Id in set)core(el,Id,set[Id])};
})(),
setFx:function (isNext){
var data=[[10,80],[112,100],[235,148],[405,100],[525,80],[-50,20],[640,20]];
for (var i=0;i<this.pics.length;++i ) {
var img=this.pics[i],v=i;
if(isNext&&i==0||i>4){
img.style.left='-40px';
img.style.width='20px';
};
if(!isNext){
if(i==this.pics.length-1){v=5};
if(i==4){
img.style.left='645px';
img.style.width='20px';
};
};
if(i>4)continue;
this.fx(img,{left:data[v][0],width:data[v][1]});
};
},
prev:function (){
this.pics.push(this.pics.shift());
this.setFx();
},
next:function (){
this.pics.unshift(this.pics.pop());
this.setFx(1);
},
init:function (){
this.box=document.getElementById("box");
var pics=this.box.getElementsByTagName("IMG");
this.pics=[];
for (var i=0;i<pics.length;++i ) this.pics.push(pics[i]);
this.setFx();
}
};
window.onload = function (){
BlueJS.init();
setInterval(function(){
BlueJS.prev();
},2000);
}
</script>
</body>
</html>
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
