JavaScript实现轮播图

最新推荐文章于 2024-07-16 22:34:38 发布

IT-Xu_LongTeng

最新推荐文章于 2024-07-16 22:34:38 发布

阅读量152

点赞数 1

文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_44269204/article/details/90140946

版权

Html代码

<body>
		<div class="header" id="header">			
			<!--设置头部的内容-->
			<div class="header-main">				
				<!--设置头部中轮播图-->
				<div class="header-banner">
					<div class="banner-img" id="banner-img">						
					</div>
				</div>
				<div class="header-top  clearfix">
					<div class="header-logo f1">
						<h1><a href="#">优酷,这世界很酷</a></h1>
					</div>				
					<!--设置搜索框-->
					<div class="header-search f1 clearfix">
						<!--<div class="search-drop" id="search_drop"></div>-->
						<div class="txt-input f1">
							<input type="text" id="text_input" />
						</div>
						<button>搜索</button>
					</div>
				</div>				
				<!--创建右边菜单HTML-->
				<div class="header_menu" id="header_menu">
					<div class="menu_active">
						<h2>欢乐喜剧人</h2>
						<p>岳云鹏人气爆棚</p>
					</div>
					<div>
						<h2>恋爱先生</h2>
						<p>程浩大胆告白罗乐</p>
					</div>
					<div>
						<h2>谈判官</h2>
						<p>杨幂变身霸道总裁</p>
					</div>
					<div>
						<h2>我是歌手</h2>
						<p>华晨宇强势登顶</p>
					</div>
					<div>
						<h2>三分钟</h2>
						<p>陈可辛三分钟催泪佳作</p>
					</div>
					<div>
						<h2>寻秦记</h2>
						<p>护嫁小分队遭遇危机</p>
					</div>
				</div>
			</div>			
		</div>		
	</body>

Css的代码

*{
	margin: 0;
	padding: 0;
}
body{
	
	 font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
	 font-size: 14px;
	 color: #333;
}
input,button{
	
	border: 0px;
	
}
a{
	text-decoration: none;
}
.f1{
	
	float: left;
}
.header{
	width: 100%;
	height: 460px;
	background-color: #4c0608;
}
.header-main{
	
	width: 1218px;
	height: 100%;
	/*border: 1px solid yellow;*/
	margin: auto;
	position: relative;
}
.header-top{
	
	height: 40px;
	width: 100%;
	/*border:  1px solid black;*/
}
.header-logo{
	
	padding: 23px 0;
}
.header-logo a{
	
	display: block;
    text-indent: -9999px;
    width: 120px;
    height: 24px;
    /*background: url(../img/yk-logo.png) no-repeat;*/
}
.header-search{
	
	width: 370px;
    height: 40px;
    margin: 15px 0 0 260px;
    position: relative;
}
.txt-input{
	width: 290px;
    height: 40px;
    /*border: 1px solid yellow;*/
    background-color: rgba(255, 255, 255, 0.6);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    /*display: inline-block;*/
    position: relative;
  
}
.header-search input{
	width: 278px;
	height: 36px;
	margin-left: 10px;
	background-color: transparent;
	position: absolute;
	top: 5px;
    left: 20px;
    outline: none;
    border: none;
}
.header-search button{
	float: left;
	width: 70px;
    height: 40px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #00acff;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    outline: none;
    border: none;
}
.banner-img{
	
	width: 1218px;
	/*border:  1px solid red;*/
	height: 460px;
	background: url(../img/banner0.png) no-repeat center;
	position: absolute;
}

.header_menu{
	
	width: 190px;
    height: 310px;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.5);
    padding: 10px 15px;
    position: absolute;
    right: 0;
    bottom: 10px;
	
}
.header_menu div{
	height: 44px;
    color: #9a9a9a;
    cursor: pointer;
    border-bottom: 1px solid #3c3838;
}
.header_menu div:last-child{
	
	border:none;
}

.header_menu div h2,.header_menu div p{
	
	font-size: 14px;
    float: left;
    line-height: 44px;
}
.header_menu div h2:after{
	
	content: ':';
}
.header_menu .menu_active{
	
	height: 70px;
    color: #fff;
}

.header_menu .menu_active h2,.header_menu .menu_active p{
	/*清除以上元素的说有样式*/
	clear: both;
}
.header_menu .menu_active h2 {
    font-size: 18px;
    line-height: 36px;
}

.header_menu .menu_active p {
    font-size: 14px;
    line-height: 34px;
}

.header_menu .menu_active h2:after {
    content: "";
}

JavaScript的代码

window.onload=function(){
	//获取导航元素
	var right_menus=document.getElementById('header_menu');
	//获取导航栏下每一个元素
	var menu_divs=right_menus.getElementsByTagName('div');
	//获取装背景图片
	var banner_img=document.getElementById('banner-img');
	//获取装整个背景的元素
	var header=document.getElementById('header');
	//用一个数组来装五张图片的颜色
	var arrColor=["#5d0b11","#dae4e5","#54514b","#733f3b","#afa7a5","#291521"];
	//给每一栏导航添加鼠标划入事件
	for(var i=0;i<menu_divs.length;i++){
		menu_divs[i].index=i;
		menu_divs[i].onmouseenter=function(){
			for(var j=0;j<menu_divs.length;j++){
				//取消所有导航的className
				menu_divs[j].className='';
			}
				this.className='menu_active';
				banner_img.style.background='url(../img/banner'+this.index+'.png)';
				header.style.backgroundColor=arrColor[this.index];
		}
	}
	
}