一款不错的图片展示效果代码

最新推荐文章于 2024-06-11 21:55:44 发布

张广森

最新推荐文章于 2024-06-11 21:55:44 发布

阅读量1.3k

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/fgdfgasd/article/details/8812617

版权

其他专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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" οnclick="BlueJS.prev();"><</button>
<button id="next" οnclick="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>

张广森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一款不错的图片展示效果代码

ldh_web_editor #box{ border:1px solid #9599A5; background:#C4C7D3; width:628px; height:150px;}#imgPanel{ height:100px; position:relative; overflow:hidden; z-index:1;
复制链接

扫一扫