名企动态网站开发--广告轮播效果

以上效果受博客图片大小限制,未能完全展示效果,想看到效果的请在本地执行以下程序

若需要图片素材,请联系博主

html部分相对简单,这同时体现出了css和js技术对网页开发强大的辅助功能

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery-2.2.1.min.js" ></script>
		<script src="js/index.js" ></script>
		
	</head>
	<body>
		<div id="area">
			<!--此div盒子用于存放六张供轮播的广告图片 -->
			<div class="scroll">
				<img src="img/1.jpg"/>
				<img src="img/2.jpg"/>
				<img src="img/3.jpg"/>
				<img src="img/4.jpg"/>
				<img src="img/5.jpg"/>
				<img src="img/6.jpg"/>
			</div>
			<!--ul-li无序列表标签用于存放按钮数字 -->
			<ul class="button">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
			
			
		</div>
	</body>
</html>

css程序中,标签一定要注明完整路径,防止多个模块间的同名标签产生冲突

css文件

*{
	margin: 0;
}
#area{
	width: 670px;
	height: 240px;
    margin: 200px auto 0px;
	position: relative;
	overflow: hidden;
	background: whitesmoke;
}
#area .scroll{
	width: 670px;
	height: 1000%;
    position: absolute;
	top: -240px;
}
#area .scroll img{
	display: block;
}
#area ul li{
	list-style-type: none;
	width: 20px;
	height: 20px;
	background: gray;
	border: 1px solid white;
	float: left;
	margin: 0 2px;
	text-align: center;
	color: white;
	border-radius: 10px;
	box-shadow: 3px 0 5px black;
}
#area ul{
	width: 160px;
	height: 20px;
	position: absolute;
	bottom: 12px;
	right: 12px;
}
#area ul li.hover{
	background: #cc3300;
}
jQuery让网页动起来,同时其精简程度也大大优于js,在内存占用上与flash时代也不可同日而语
js文件(jQuery)

$(document).ready(function(){
	//定义_index变量,代表广告图片的序号
	var _index=0;
	//setInterval()函数的返回值
	var setTime=null;
	/*
	 * hover函数对鼠标滑进滑出事件进行操作,当鼠标光标滑进元素区域时触发第一个function()函数,
	 * 当光标离开时触发第二个function()函数
	 * 第一个function(){
	 * 	1.清除定时器自动轮播效果
	 *  2.获得鼠标选定的序列号数值并赋给_index
	 *  3.给当前选定的序号添加背景色,未选定的清除背景色,背景色设置在css文件中的.hover中
	 *  4.animate()方法进行固定间隔的图片切换,以便产生动画效果
	 * }
	 * 第二个function(){
	 * 	光标移开按钮区域时,继续调用自动轮播函数--autoPlay()
	 * }
	 */
	$('ul li').hover(function(){
		clearInterval(setTime);
		_index=$(this).index();
		$(this).addClass("hover").siblings('li').removeClass("hover");
		$('.scroll').animate({
		         top:-(_index*240) 
		},300)
		
	},function(){
		autoPlay();
	})
	/*
	 * 定义自动轮播函数autoPlay()
	 * setInterval()函数第一个参数为要重复执行的函数,第二个参数为每次执行间隔
	 */
	function autoPlay(){
		setTime=setInterval(function(){
		if(_index==6)_index=0;
		
		$('ul li').eq(_index).addClass("hover").siblings('li').removeClass("hover");
		$('.scroll').animate({top:-(_index*240) },2000)
		_index++;	
		},2000);
		
	}
	autoPlay();
	
})



你可能感兴趣的:(JavaScript,html,js,jquery,广告轮播)