广告动画效果是用jquery的annimate实现的,实现起来很简单,代码如下:
//实现广告动画的原理是将N张图片高度设置成一样,并纵向排列在一起
//每张图片对应一个index,通过index++移动对应的高度,从而实现切换图片的效果
//动火过程是通过jQuery的animate()方法实现的
$(function(){
$('#num li').mouseover(function(){
//jQuery.index()方法获得该li在ul下的位置,从0开始
var index=$('#num li').index(this);
showImage(index);
//页面初始化时鼠标模拟停在第一个li上
}).eq(0).mouseover();
var taskId;
var index=0;
//hover(over,out):模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)
$('#d1').hover(function(){
//鼠标悬停在图片上时消除定时任务
clearInterval(taskId);
},function(){
//设置一个定时任务每2秒执行一次,即切换到下一张图片
taskId=setInterval(function(){
showImage(index);
index++;
if(index==5){
index=0;
}
},2000);
}).mouseleave();
});
//显示图片的方法
function showImage(index){
//stop(true):在执行当前动画之前,先清除之前未完成的动画
//animate方法是执行动画,请参照jquery文档
$('#adv').stop(true).animate({'top':-index*217},1000);
//更改li按钮的样式
$('#num li').eq(index).addClass('on').siblings().removeClass('on');
}
完整源代码的下载地址:http://download.csdn.net/detail/xulianghh/5091050