search

博客列表 >js轮播图作业 - ***五期线上班

js轮播图作业 - ***五期线上班

哥特的博客
哥特的博客原创
2019年03月28日 12:53:14832浏览

轮播&TAB总结：在需要点击的元素上设置onclick并且给予一个下标，创建一个js函数函数名和onclick一样并且传参。创建获取需要轮播的元素如使用【document.getElementById('box')】并且赋值给一个变量，再获取该变量下需要轮播的元素并赋值给一个变量。 使用for循环知道变量下标的长度，让每个需要轮播的元素下标样式是不显示。在循环外层设置该轮播元素的下标为函数传参和样式为块级元素进行显示。


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			font-size: 12px;
		}
		a{
			text-decoration: none;
		}
		li{
			list-style: none;
		}
		body{
			background:#f5f5f5;
		}
		#box{
			width: 800px;
			height: 500px;
			margin: 20px auto;
			position: relative;
			overflow: hidden;
		}
		#box img{
			width: 800px;
			height: 500px;
		}
		#box p{
			position: absolute;
			bottom: 4px;
			left: 4px;
			color: #fff;
		}
		#box p span{
			width: 20px;
			height: 20px;
			line-height: 20px;
			border-radius:50%;
			background: rgba(254,254,254,0.6);
			display: inline-block;
			text-align: center;
		}
		#box p span:hover{
			background: red;	
			cursor:pointer		
		}
		.menu{
			width: 100%;
			height: 36px;
			background: #000;
		}
		.nav{
			width: 800px;
			margin:0 auto;
		}
		.nav li{
			width: 120px;
			height: 36px;			
			line-height: 36px;
			text-align: center;
			background: red;
			display: block;
			float: left;
			position: relative; 
		}
		.nav li a{
			padding:0 10px;
			color: #fff;
			font-size: 14px;
			height: 36px;			
			line-height: 36px; 
		}
		.two{
			position: absolute;
			display: none;
			top: 36px;
			z-index: 1;
		} 
		.two li:hover{
			background: #000;

		}
		#news{
			background: #ccc;
			width: 800px;
			height: 200px;
			margin: 0 auto;
			margin-bottom: 20px;
		}
		#news #title{
			height: 40px;
			background: #b54a3e;
		}
		#title li{
			display: block;
			float: left;
			padding-right: 2px;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			padding:0 12px;
			color: #fff;
		}
		#title li:hover{
			background: red; 
			cursor:pointer
		}
		#content{
			height: 160px;
			overflow: hidden;
		}
		#content li{
			width: 200px;
			height: 26px;
			line-height: 26px;
			display: block;
			float: left;
		}
		#content li a{
			color:#b35353;
			padding-left: 10px;

		}

		.cont{
			display: none; 
		}
	</style>
	<script type="text/javascript">
		$(function(){
			$('.one>li').mouseover(function(){

				$(this).find('.two').slideDown(500)
			});
			$('.one>li').mouseleave(function(){
				$(this).find('.two').slideUp(500)
			})
		})
	</script>
</head>
<body>
	<div class="menu">
		<div class="nav">
			<ul class="one">
				<li><a href="#">网站首页</a></li>
				<li><a href="#">导航菜单</a>
					<ul class="two">
						<li><a href="#">导航菜单</a></li>
						<li><a href="#">导航菜单</a></li>
						<li><a href="#">导航菜单</a></li>
						<li><a href="#">导航菜单</a></li>
					</ul>
				</li>
				<li><a href="#">导航菜单</a></li>
				<li><a href="#">导航菜单</a></li>
				<li><a href="#">导航菜单</a></li>
				<li><a href="#">导航菜单</a></li>
			</ul>
		</div>
	</div>
	<div id="box">
		<a href="#"><img src="https://img.php.cn/upload/webpage/000/000/006/593119cb42759634.jpg" alt=""></a>
		<a href="#"><img src="https://img.php.cn/upload/webpage/000/000/006/5931149f5db2a807.jpg" alt=""></a>
		<a href="#"><img src="https://img.php.cn/upload/webpage/000/013/709/5989699f1cfed983.jpg" alt=""></a>
		<a href="#"><img src="https://img.php.cn/upload/webpage/000/013/709/59896cc374e7f146.jpg" alt=""></a>
		<a href="#"><img src="https://img.php.cn/upload/webpage/000/000/001/59882639117c2119.jpg" alt=""></a>
			<p>
				<span onclick='chenge(0)'>1</span>
				<span onclick='chenge(1)'>2</span>
				<span onclick='chenge(2)'>3</span>
				<span onclick='chenge(3)'>4</span>
				<span onclick='chenge(4)'>5</span>
			</p>	
	</div>
	<div id="news">
		<div id="title">
			<li onclick="tab(0)">新闻1</li>
			<li onclick="tab(1)">新闻2</li>
			<li onclick="tab(2)">新闻3</li>
			<li onclick="tab(3)">新闻4</li>
		</div>
		<div id="content">
			<div class="cont" style="display:block">
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
				<li><a href="">我是新闻1</a></li>
			</div>
			<div class="cont">
				<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>
						<li><a href="">我是新闻2</a></li>		
			</div>
			<div class="cont">
				<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>
					<li><a href="">我是新闻3</a></li>	
			</div>
			<div class="cont">
				<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>
					<li><a href="">我是新闻4</a></li>	
			</div>
		</div>
	</div>
<script type="text/javascript">
		 
			function chenge(num){
				//先获取幻灯片box id
				var obj_box = document.getElementById('box'); 
				// 获取改元素下面的标签 a
				var obj_img = obj_box.getElementsByTagName('a'); 
				// 循环a标签让循环的下标的图片不显示
						for (var i = 0; i < obj_img.length; i++) {
							obj_img[i].style.display='none';
							 
						};
					obj_img[num].style.display='block';
			}
		 
	</script>
<script type="text/javascript">
	function tab(num){
		var news = document.getElementById('news');
		var cont = news.getElementsByClassName('cont');

		for (var i = 0; i < cont.length; i++) {
			cont[i].style.display='none';
		};
		cont[num].style.display='block';
	}
</script>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



上一条：JS切换TAB和图片切换下一条：安卓机器人案例
js轮播图作业 - PHP培训五期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多