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

2021年6月27日 1点热度 0条评论 来源: wblearn

今天来复习一下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>

相关图片:

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

 

注意:记得要引入js类库,我的是jquery-1.4.3.js,JQuery的知识其实并不难,只要平常我们通过帮助文档多应用JQuery,相信很快就能熟练掌握,不要让任何事情成为我们不去学习的理由,加油!

    原文作者:wblearn
    原文地址: https://blog.csdn.net/wudalang_gd/article/details/50933437
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。