一款不错的图片展示效果代码
2013-04-17 10:24
183 查看
<!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.skylm.com/samples/1.jpg" />
<img src="http://www.skylm.com/samples/2.jpg" />
<img src="http://www.skylm.com/samples/3.jpg" />
<img src="http://www.skylm.com/samples/4.jpg" />
<img src="http://www.skylm.com/samples/5.jpg" />
<img src="http://www.skylm.com/samples/6.jpg" />
<img src="http://www.skylm.com/samples/7.jpg" />
<img src="http://www.skylm.com/samples/8.jpg" />
<img src="http://www.skylm.com/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>
<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.skylm.com/samples/1.jpg" />
<img src="http://www.skylm.com/samples/2.jpg" />
<img src="http://www.skylm.com/samples/3.jpg" />
<img src="http://www.skylm.com/samples/4.jpg" />
<img src="http://www.skylm.com/samples/5.jpg" />
<img src="http://www.skylm.com/samples/6.jpg" />
<img src="http://www.skylm.com/samples/7.jpg" />
<img src="http://www.skylm.com/samples/8.jpg" />
<img src="http://www.skylm.com/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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript+CSS实现漂亮带缓冲效果的图片展示代码
- 一款基于jquery的手风琴图片展示效果
- 非常不错的一款打字代码效果
- js放大镜效果。类似于淘宝产品内页多图展示代码，鼠标移到图片上有放大效果，方便查看产品细节，此代码适合网店产品展示，
- js实现百度联盟中一款不错的图片切换效果完整实例
- 点击图片产生水波的动画效果代码展示
- JS特效代码大全（九）超炫的js图片展示效果（一）
- jquery的图片展示--卡牌翻转效果的代码示例
- [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
- javascript实现多张图片轮流展示效果代码
- Javascript+CSS实现漂亮带缓冲效果的图片展示代码
- JS特效代码大全（九）超炫的js图片展示效果（一）
- JS特效代码大全（十）超炫的js图片展示效果（二）
- 一个不错的，JavaScript代码，显示首页图片幻灯片效果
- 一款基于jquery的手风琴图片展示效果
- Jquery 焦点图 用于图片展示效果代码
- 一款漂亮经典的图片切换效果代码
- JS实现3D图片旋转展示效果代码
- 分享一款基于jqery的带3D切换效果的图片展示
- 比较不错的一款图片广告效果