很棒的JS图片切换效果
2012-03-06 20:19
381 查看
<style type="text/css">
.ss{
border:1px solid #000000;
height:100px;
width:100px;
position:absolute;
left:100px;
top:240px;
z-index:1;
border:1px solid #FFFFFF;
}
</style>
<body style="background-color:#000000;color:#FFFFFF; font-size:12px;">
<div>循环播放<input id='a1' value="确定" type="button" onClick="cycle(this)" disabled="disabled"></div>
<div>键盘操作(left,rigth键====>‘→’‘←’)<input id='a2' value="确定" type="button" onClick="keyboard(this)"></div>
<script>
Array.prototype.end =function(){return (this.length) ? this[this.length - 1] : null;};
function $(Id){return document.getElementById(Id)};
function create(elm,parent,fn){var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);};
var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
function foreach(arr,fn){for(var i=0;i<arr.length;i++){arr[i]=fn(arr[i])}}
function parseint(elm,type){
switch(type)
{
case 1:
return parseInt(CurrentStyle(elm).width);
break;
case 2:
return parseInt(CurrentStyle(elm).height);
break;
case 3:
return parseInt(CurrentStyle(elm).left);
break;
case 4:
return parseInt(CurrentStyle(elm).top);
break
default:
return ;
}
}
var Tween = {
Quintic:{
easeOut: function(t,b,c,d){
//return c*((t=t/d-1)*t*t*t*t + 1) + b;
return c*t/d + b;
}
}
}
var extend = function()
{
var args = arguments;
if(!args[1])args = [this,args[0]];
for(var property in args[1])args[0][property] = args[1][property];
return args[0];
};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var imgswitch = new Class({
options:{
range :300, //扩大的范围;
step :30,
t :0,
time :10,
zindex :10,
leftdiff:150 //图片的间距
},
initialize:function(data,dif){
var self = this;
this.data = data;
this.dif = dif;
this.lock = false;
this.timer = null;
this.position = [];
this.direction= true;
this.current = new Array(4);
////////////////////////////////////////////////////////////////////////
this.range = this.options.range;
this.step = document.all?this.options.step:this.options.step-20;
this.t = this.options.t;
this.time = this.options.time;
this.zindex = this.options.zindex;
this.leftdiff = this.options.leftdiff;
////////////////////////////////////////////////////////////////////////
for(var i=0; i<this.data.length;i++)
{
create('img',document.body,function(elm){
with(elm){id = self.data[i].id;className= self.data[i].className;src= self.data[i].src;style.left = parseint($(self.data[0].id),3) +i*self.leftdiff}
self.position.push(parseInt(CurrentStyle(elm).left));
})
}
this.original = [parseint($(this.data[0].id),1),parseint($(this.data[0].id),2),parseint($(this.data[0].id),3),parseint($(this.data[0].id),4)];
this.gap = parseint($(this.data[1].id),3)-parseint($(this.data[0].id),3);
////////////////////////////////////////////////////////////////////////////////////////////////////
//设置最后一张图片的位置 长度 高度
var data =$(this.data.end().id);
data.style.height = this.current[1] = parseint(data,2)+this.range+'px';
data.style.width = this.current[0] = parseint(data,1)+this.range+'px';
data.style.left = this.current[2] = this.position[0] +(parseint($(this.data[this.data.length-2].id),3)-parseint($(this.data[0].id),3)-this.range)/2;
data.style.top = this.current[3] = parseint(data,4) - this.range/2 ;
data.zIndex = this.zindex;
///////////////////////////////////////////////////////////////////////////////////////////////////
this.position[this.position.length-1]=parseint(data,3);
foreach(this.current,function(o){return o=parseInt(o) });
},
start:function(arg){;
if(this.lock){return}
else{this.lock ='true'}
this.direction = arg;
this.gap = (this.direction?Math.abs(this.gap):(-1)*(Math.abs(this.gap)))
this.move();
},
fun:function(){
this.movep();this.movef();this.movel();
},
movep:function(){
var j = this.direction?(-1):0
for(var i = 1+j ; i<this.data.length-1+j; i++)
{$(this.data[i].id).style.left = this.position[i] + this.moveto(this.t,0,this.gap,this.step)}
},
movef:function(){ //中间的图移动
var data = $(this.data.end().id);
data.style.left = this.direction?(this.position[this.position.length-1] + this.moveto(this.t,0,(this.position[0]-this.current[2]),this.step)):(this.current[2] +this.moveto(this.t,0,(this.position[this.position.length-2]-this.current[2]),this.step))
data.style.top = this.moveto(this.t,this.current[3],(this.original[3]-this.current[3]),this.step);
data.style.width = this.moveto(this.t,this.current[0],(-1*this.range),this.step);
data.style.height = this.moveto(this.t,this.current[1],(-1*this.range),this.step);
data.style.zIndex = this.moveto(this.t,this.zindex,(1-this.zindex),this.step);
},
movel:function(){ //两边的图片移动
var data = this.direction?$(this.data[this.data.length-2].id):$(this.data[0].id)
data.style.left = this.direction?(this.position[this.position.length-2] + this.moveto(this.t,0,(this.current[2]-this.position[this.position.length-2]),this.step)):(this.position[0] + this.moveto(this.t,0,(this.current[2]-this.position[0]),this.step))
data.style.width = this.moveto(this.t,this.original[0],this.range,this.step);
data.style.height = this.moveto(this.t,this.original[1],this.range,this.step);
data.style.top = this.moveto(this.t,this.original[3],(this.current[3]-this.original[3]),this.step);
data.style.zIndex = this.moveto(this.t,3,(this.zindex-1),this.step);
},
move:function(){
var self = this;
this.fun();
if(++this.t>this.step)
{
clearTimeout(this.timer);this.t=0;this.lock=false;
this.direction?this.data.splice(0,0,this.data.pop()):this.data.push(this.data.shift())
}
else
{this.timer = setTimeout(function(){self.move()},this.time)}
},
moveto:function(t,b,c,d){
return Math.round(Tween.Quintic.easeOut(t,b,c,d));
}
})
var arr = [{id:'img1',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_1.gif'},{id:'img2',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_2.gif'},{id:'img3',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_7.gif'},{id:'img4',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_8.gif'},{id:'img5',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_10.gif'},{id:'img6',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_11.gif'},{id:'img7',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_12.gif'}];
var a = new imgswitch(arr,4000);
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)}
functi
9d59
on removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}
var timer =null
function cycle(obj){
obj.disabled="disabled"
$('a2').disabled = ''
timer = setInterval(function(){a.move()},4000)
removeListener(document,'keydown',an)
}
function keyboard(obj){
obj.disabled="disabled"
$('a1').disabled = ''
clearTimeout(timer)
addListener(document,'keydown',an)
}
function an(event){
var e = event || window.event
if((e.charCode||e.keyCode)==37)
{a.start(true);}
if((e.charCode||e.keyCode)==39)
{a.start(false);}
}
timer = setInterval(function(){a.move()},4000)
</script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS + CSS 图片切换效果
- 最简单的js图片切换效果实现代码
- JS图片轮播切换效果实现
- js+css打造的仿土豆网带缩略图的图片幻灯切换效果
- css图片切换效果代码[不用js]
- js实现支持手机滑动切换的轮播图片效果实例
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- js实现图片淡入淡出切换简易效果
- 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)
- JS实现图片高斯模糊切换效果的焦点图实例
- 最简单的js图片切换效果实现代码
- JS + CSS 图片切换效果
- 映彩衣的js随笔(js图片切换效果)
- js支持键盘控制的左右切换立体式图片轮播效果代码分享
- JS实现的文字与图片定时切换效果代码
- JS图片滤镜 焦点图片自动切换显示效果丨芯晴网页特效
- JS + CSS 图片切换效果
- 原生JS实现隐藏显示图片 JS实现点击切换图片效果
- js鼠标点击图片切换效果代码分享
- JS切换图片幻灯切换效果