原生javascript实现的图片轮播插件源码

作者：管理员

发布时间：2013/11/13 10:10:36

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=365

此文章是由是从事政府资助工作的网友杰立提供，主要是给网友们学习怎么去写图片轮播特效用来参考，下面有整个插件的实现源码和调用方法，是用面向对象的方式实现的，一共包括了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());
});

关键字：css3