写了个图片切换效果，大伙看看！该怎么解决
日期：2014-05-16 浏览次数：20459 次
写了个图片切换效果，大伙看看！
水平有限，望各位大虾指教下.....
点这里看
代码如下:
水平有限，望各位大虾指教下.....
点这里看
代码如下:
- HTML code
<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/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);
//设置最后一张图片的位置 长度 高度
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
