此文章是由是从事政府资助工作的网友杰立提供，主要是给网友们学习怎么去写图片轮播特效用来参考，下面有整个插件的实现源码和调用方法，是用面向对象的方式实现的，一共包括了10个方法，代码写得很不错，网友们好好看一下哦。。。
var PageScroller = new Class({
initialize: function(pageContainer, controlEl) {
this.el = pageContainer;
this.control = controlEl;
controlEl.getElements("li").addEvent('mouseenter', this.stopAutoScroll.bind(this));
controlEl.getElements("li").addEvent('mouseleave', this.startAutoScroll.bind(this));
controlEl.getElements("li").addEvent('mouseover:relay(div)', this.hover.bind(this));
controlEl.getElements("li").addEvent('mouseout:relay(div)', this.mouseout.bind(this));
controlEl.getElements("li").addEvent('click', this.onClick.bind(this));
this.startAutoScroll();
},
scrollTo: function(leftValue) {
var self = this;
var myFx = new Fx.Scroll(this.el, {
transition: Fx.Transitions.linear.easeIn,
onComplete: function() {
self.scrolling = false;
}
}
).start(leftValue);
},
mouseout: function(e) {
$(e.target).removeClass("hover");
this.lastHover = null;
},
startAutoScroll: function() {
this.control.getElements("li").removeClass('hover');
this.timer = setTimeout(this.loop.bind(this), 5000);
},
reset: function() {
this.control.getElements("li").removeClass('selected')[0].addClass('selected');
this.el.scrollLeft = 0;
},
loop: function() {
var control = this.control;
var items = control.getElements("li");
var index = items.indexOf(control.getElement("li.selected"));
++index;
if (index < items.length) {
this.select(items[index]);
} else {
this.reset();
}
this.timer = setTimeout(this.loop.bind(this), 5000);
},
stopAutoScroll: function() {
$clear(this.timer);
},
hover: function(e) {
var target = $(e.target);
if ($(target).hasClass("hover") || $(target).hasClass("selected") || this.lastHover == target) {
return;
}
var self = this;
this.lastHover = target;
this.control.getElements("li").removeClass('hover');
//$(e.target).addClass("hover");
new Fx.Morph(target, {
duration: 200,
transition: Fx.Transitions.Sine.easeOut,
onComplete: function() {
if (self.lastHover == target) target.addClass("hover");
new Fx.Morph(target, {
duration: 500,
transition: Fx.Transitions.Sine.easeOut
}).start({
'opacity': 1
});
}
}).start({
'opacity': 0
});
},
select: function(el) {
if (this.scrolling) {
setTimeout(function() {
this.select(el);
}.bind(this), 10);
return;
}
this.scrolling = true;
var index = this.control.getElements("li").indexOf(el);
this.scrollTo(index * 1000);
this.control.getElements("li").removeClass('selected');
el.addClass('selected');
//alert(index);
},
onClick: function(e) {
var target = $(e.target);
this.select(target);
}
});
//调用时的代码
window.addEvent('load', function() {
$$(".ipImages").each(function(img) {
if (img.get('src2') != '' && img.get('src2') != null) {
img.set('src', img.get('src2'))
}
});
var widgetClass = 'ic183';
new PageScroller(document.getElement("." + widgetClass), document.getElement("." + widgetClass).getNext());
});
如果您觉得本文的内容对您的学习有所帮助：
关键字：
javascript 图片轮播 PageScroller 面向对象 焦点图