利用JQuery实现广告动态滚动特效

wudalang_gd

浏览: 9713 次
性别:
来自: 深圳

最近访客更多访客>>

zhangpo18595451254

我也不知道我是谁

tx0717

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

今天来复习一下JQuery的知识，JQuery的特点：利用选择器查找要操作的节点，并且会将这些节点封装成一个jQuery对象。通过调用jQuery对象的属性或者方法来实现对底层节点的操作，这样做的好处有两个：一是兼容性更好了，另外，代码得到简化。关于JQuery的一些知识点，譬如选择器、dom对象、事件处理、动画、类数组等，我就不一一说了，下面直接演示上图简单的广告条动态滚动显示。

html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	*{
		margin:0px;
		padding:0px;
	}
	#d1{
		border : 1px solid #aaaaaa;
		margin-left:200px;
		margin-top:40px;
		width:548px; 
		height:177px; 
		overflow:hidden;
		position:relative;
	}
	
	#adv,#num{
		position:absolute;
	}
	
	ul li{
		list-style:none;
		display:inline;
	}
	ul img{
		width:548px; 
		height:177px;
		display:block;
	}
	
	#num{
		right:5px;
		bottom:5px;
	}
	
	#num li{
		float: left;
		color: #FF7300;
		text-align: center;
		line-height: 16px;
		width: 16px;
		height: 16px;
		font-family: Arial;
		font-size: 12px;
		cursor: pointer;
		overflow: hidden;
		margin: 3px 1px;
		border: 1px solid #FF7300;
		
	}
	
	.on{
		line-height: 21px;
		width: 21px;
		height: 21px;
		font-size: 16px;
		margin: 0 1px;
		border: 0;
		background-color:red;
		font-weight: bold;
	}
</style>
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
	$(function(){
		$('#num li').mouseenter(function(){
			//获得光标指向的li的下标
			var index = $('#num li').index(this);
			//滚动图片
			showImage(index);
		}).eq(0).mouseenter();
		var i = 0;
		var taskId;
		$('#d1').hover(function(){
			//光标进入，停止滚动
			clearInterval(taskId);
		},function(){
			//光标离开，开始滚动
			taskId = setInterval(function(){
				showImage(i);
				i++;
				if(i==5){
					i = 0;
				}
			},2000);
		}).mouseleave();
	});
	function showImage(index){
		//stop(true):先清空当前对象上累积的所有的动画。
		$('#adv').stop(true).animate({'top':-index * 177},1000);
		//加亮光标指向的li
		$('#num li').eq(index).addClass('on')
		.siblings().removeClass('on');
	}
</script>
</head>
<body>
	<div id="d1">
		<ul id="adv">
			<li><img src="../images/1.jpg"/></li>
			<li><img src="../images/2.jpg"/></li>
			<li><img src="../images/3.jpg"/></li>
			<li><img src="../images/4.jpg"/></li>
			<li><img src="../images/5.jpg"/></li>
		</ul>
		<ul id="num">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>

</body>
</html>