<script>
document.all && document.execCommand("BackgroundImageCache", false, true); var isIE = (document.all) ? true : false; var $ = function(id) {
return document.getElementById(id);
}; var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
} var Bind = function(object, fun, args) {
return function() {
return fun.apply(object, args || []);
}
} var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(argumens).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
} var CurrentStyle = function(element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
} var Tween = {
Quart: {
easeOut: function(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}
}
} function create(elm, parent, fn) { var element = document.createElement(elm); fn && fn(element); parent && parent.appendChild(element); return element };
function addListener(element, e, fn) { element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn) };
function removeListener(element, e, fn) { element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn) }; 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 Imgroll = new Class({
options: {
Isrun: false,
Step: 100,
Time: 10,
t: 0,
b: 0,
c: 0,
d: 60,
Tween: Tween.Quart.easeOut,
Oninit: function() { },
Onstart: function() { },
Onstop: function() { }
},
initialize: function(obj, c, total, i, options) {
this._obj = obj;
this._c = c;
this._total = total; //显示区域有多少张图片
this.i = i; //聚焦于第i张图片
this.timer = null;
this.Isrun = this.options.isrun;
this.Step = this.options.Step;
this.Time = this.options.Time;
this.t = this.options.t;
this.b = this.options.b;
this.c = this.options.c;
this.d = this.options.d;
this.Tween = this.options.Tween;
this.Oninit = this.options.Oninit;
this.Onstart = this.options.Onstart;
this.Onstop = this.options.Onstop;
Extend(this, options || {});
var self = this, i = 0, img = this._c.getElementsByTagName('a');
this._c.style.width = img.length * this.Step + 'px';
for (; i < img.length; i++) {
img[i].num = i;
(function(i) {
addListener(img[i], 'click', Bind(self, self.Start, [img[i]]));
})(i);
}
},
Start: function(c) {
if (this.Isrun) return;
this.Isrun = true;
var img = this._c.getElementsByTagName('a')
this.b = this._obj.scrollLeft;
c && (this.c = c.num < this.i ? (-1) * this.b : (c.num > img.length - (this._total - this.i + 1) - 1 ? (img.length - this._total) * this.Step - this.b : (c.num - this.i + 1) * this.Step - this.b));
this.Onstart(c);
if (this.c == 0) { this.Isrun = false; return; }
this.Run();
},
Run: function() {
if (this.t < this.d) {
this.RunTo(Math.round(this.Tween(++this.t, this.b, this.c, this.d)))
this.timer = setTimeout(Bind(this, this.Run), this.Time)
}
else {
this.RunTo(this.b + this.c);
this.Stop();
}
},
RunTo: function(i) {
this._obj.scrollLeft = i;
},
Pre: function() {
this.c = this.Step * (-1);
this.Start();
},
Next: function() {
this.c = this.Step;
this.Start();
},
Stop: function() {
clearTimeout(this.timer);
this.t = 0; this.Isrun = false;
this.Onstop()
}
}) var ss = new Imgroll($('middle'), $('thumblist'), 9, 5, {
Step: 102,
Onstart: function(obj) {
if (!obj) return;
this.o && (this.o.className = '');
this.o = obj;
obj.className = 'cc';
},
Onstop: function() {
$('left').style.backgroundPosition = this._obj.scrollLeft == 0 ? "0px 0px" : "-29px 0px";
$('right').style.backgroundPosition = this._obj.scrollLeft == 816 ? "0px 0px" : "-29px 0px";
}
});
addListener($('right'), 'click', function() { ss.Next() });
addListener($('left'), 'click', function() { ss.Pre() });
</script>
document.all && document.execCommand("BackgroundImageCache", false, true); var isIE = (document.all) ? true : false; var $ = function(id) {
return document.getElementById(id);
}; var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
} var Bind = function(object, fun, args) {
return function() {
return fun.apply(object, args || []);
}
} var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(argumens).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
} var CurrentStyle = function(element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
} var Tween = {
Quart: {
easeOut: function(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}
}
} function create(elm, parent, fn) { var element = document.createElement(elm); fn && fn(element); parent && parent.appendChild(element); return element };
function addListener(element, e, fn) { element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn) };
function removeListener(element, e, fn) { element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn) }; 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 Imgroll = new Class({
options: {
Isrun: false,
Step: 100,
Time: 10,
t: 0,
b: 0,
c: 0,
d: 60,
Tween: Tween.Quart.easeOut,
Oninit: function() { },
Onstart: function() { },
Onstop: function() { }
},
initialize: function(obj, c, total, i, options) {
this._obj = obj;
this._c = c;
this._total = total; //显示区域有多少张图片
this.i = i; //聚焦于第i张图片
this.timer = null;
this.Isrun = this.options.isrun;
this.Step = this.options.Step;
this.Time = this.options.Time;
this.t = this.options.t;
this.b = this.options.b;
this.c = this.options.c;
this.d = this.options.d;
this.Tween = this.options.Tween;
this.Oninit = this.options.Oninit;
this.Onstart = this.options.Onstart;
this.Onstop = this.options.Onstop;
Extend(this, options || {});
var self = this, i = 0, img = this._c.getElementsByTagName('a');
this._c.style.width = img.length * this.Step + 'px';
for (; i < img.length; i++) {
img[i].num = i;
(function(i) {
addListener(img[i], 'click', Bind(self, self.Start, [img[i]]));
})(i);
}
},
Start: function(c) {
if (this.Isrun) return;
this.Isrun = true;
var img = this._c.getElementsByTagName('a')
this.b = this._obj.scrollLeft;
c && (this.c = c.num < this.i ? (-1) * this.b : (c.num > img.length - (this._total - this.i + 1) - 1 ? (img.length - this._total) * this.Step - this.b : (c.num - this.i + 1) * this.Step - this.b));
this.Onstart(c);
if (this.c == 0) { this.Isrun = false; return; }
this.Run();
},
Run: function() {
if (this.t < this.d) {
this.RunTo(Math.round(this.Tween(++this.t, this.b, this.c, this.d)))
this.timer = setTimeout(Bind(this, this.Run), this.Time)
}
else {
this.RunTo(this.b + this.c);
this.Stop();
}
},
RunTo: function(i) {
this._obj.scrollLeft = i;
},
Pre: function() {
this.c = this.Step * (-1);
this.Start();
},
Next: function() {
this.c = this.Step;
this.Start();
},
Stop: function() {
clearTimeout(this.timer);
this.t = 0; this.Isrun = false;
this.Onstop()
}
}) var ss = new Imgroll($('middle'), $('thumblist'), 9, 5, {
Step: 102,
Onstart: function(obj) {
if (!obj) return;
this.o && (this.o.className = '');
this.o = obj;
obj.className = 'cc';
},
Onstop: function() {
$('left').style.backgroundPosition = this._obj.scrollLeft == 0 ? "0px 0px" : "-29px 0px";
$('right').style.backgroundPosition = this._obj.scrollLeft == 816 ? "0px 0px" : "-29px 0px";
}
});
addListener($('right'), 'click', function() { ss.Next() });
addListener($('left'), 'click', function() { ss.Pre() });
</script>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货