活动广告滑动切换JS效果
之前写了个javascript动画对象里面的demo比较简单，这是一个比较完整的JS效果。代码很简单，通过修改position:absolute元素的left属性实现滑动切换。
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);
}
}());
