Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > js轮播图作业 - ***五期线上班
Blogger Information
Blog 27
fans 1
comment 1
visits 21988
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js轮播图作业 - ***五期线上班
哥特的博客
Original
840 people have browsed it

轮播&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>

运行实例 »

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



Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post