活动广告滑动切换JS效果

之前写了个javascript动画对象里面的demo比较简单，这是一个比较完整的JS效果。代码很简单，通过修改position:absolute元素的left属性实现滑动切换。

点击这里查看淘宝活动广告滑动切换JS效果

JS代码:

(function(){
	//rentj1@163.com	  
	var left = 0;
	var slide = document.getElementById("slide-content");
	var options = document.getElementById("slide-options").getElementsByTagName("li");
	var width = 715;
	var active = 0;
	var length = options.length;
	slide.style.width = (width * options.length)+ "px";
	
	//绑定事件
	var onchange = function(index){
		//动画代码
	
		(index === undefined) ? left -= width : left = -(index * width);
		if(Math.abs(left) > (options.length-1)* width){
			left = 0;	
		}

		effect.animate(slide, { left: left }, 300, "easeIn",function(){

			options[active].className = "";												 
			active = Math.abs(left/width);
			options[active].className = "select";
																	
		});
	}
	
	
	
	var timer = setInterval(onchange ,3000);
	
	for(var i=0; i<length; i++) {
		
		(function(i){
				  
			options[i].onmouseover = function(){
				//alert(i)
				clearInterval(timer);
				onchange(i);
			};
			
			options[i].onmouseleave = function(){
				timer = setInterval(onchange ,3000);
				
			};
		
		})(i);
	}
	
}());