JavaScript实现轮播图

分手后的思念是犯贱 2022-02-03 19:49 250阅读 0赞

**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="txt-input f1">
    							<input type="text" id="text_input" />
    						</div>
    						<button>搜索</button>
    					</div>
    				</div>				
    				
    				<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的代码**