Javascript制作简单的图片展示效果_Javascript教程_H5之家

详细代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</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>