淘宝活动广告滑动切换JS效果

web编程之路

之前写了个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.onmouseover = function(){//alert(i)clearInterval(timer);onchange(i);};options.onmouseleave = function(){timer = setInterval(onchange ,3000);};})(i);}}());