用jquery写一个简单的广告动画效果

最新推荐文章于 2022-05-04 00:00:00 发布

原创最新推荐文章于 2022-05-04 00:00:00 发布 · 624 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何利用jQuery的animate()方法实现广告动画效果。通过将多张图片设置为相同高度并纵向排列，配合index++操作，实现了图片的平滑切换。此外，还通过hover事件模拟了鼠标悬停和离开时的动画暂停与切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

广告动画效果是用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.youkuaiyun.com/detail/xulianghh/5091050