1、HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学堂在线</title>
<link rel="stylesheet" type="text/css" href="css/xuetangzaixian.css" />
<script type="text/javascript" src="js/img_slide.js"></script>
</head>
<body>
<div class="head">
<div class="menu">
<ul>
<img class="head_logo" src="img/xuetangzaixianlogo.png" />
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">全部课程</a>
</li>
<li>
<a href="#">学堂云</a>
</li>
<li>
<a href="#">雨课堂</a>
</li>
<li>
<a href="#">学分课</a>
</li>
<li>
<a href="#">更多 v</a>
</li>
</ul>
</div>
<div class="search">
<input class="search_data" type="text" placeholder="搜索课程/院校名称" />
<a href="#"><img class="search_logo" src="img/search.png" /></a>
</div>
<div class="login">
<a href="#">登录</a>
</div>
<div class="regin">
<button class="regin_btn">注册</button>
</div>
</div>
<div class="contain">
<div class="lunbo">
<a href="#"><img class="img_slide imgOne" src="img/renzheng.png" alt="1"/></a>
<a href="#"><img class="img_slide imgOther" src="img/jiaoshou.png" alt="2"/></a>
<a href="#"><img class="img_slide imgOther" src="img/xuewei.png" alt="3"/></a>
</div>
<div class="logo">
<a href="#"><img class="imglogo" src="img/qinghua.png" alt="1"/></a>
<a href="#"><img class="imglogo" src="img/beijing.png" alt="2"/></a>
<a href="#"><img class="imglogo" src="img/fudan.png" alt="3"/></a>
<a href="#"><img class="imglogo" src="img/guofang.png" alt="4"/></a>
<a href="#"><img class="imglogo" src="img/xian.png" alt="5"/></a>
<a href="#"><img class="imglogo" src="img/microsoft.png" alt="6"/></a>
</div>
<div class="newClass">
<h2 class="newClass_tile">新课速递</h2>
<p class="newClass_con">千呼万唤始出来，本月新课抢先看！</p>
</div>
<div class="newClass1"></div>
<div class="newClass2"></div>
<div class="newClass3"></div>
<div class="newClass4"></div>
<div class="newClass1"></div>
<div class="newClass2"></div>
<div class="newClass3"></div>
<div class="newClass4"></div>
<div class="train">
<hr />
<h2 class="newClass_tile">训练营</h2>
<p class="newClass_con">修炼CS内功，引领AI时代</p>
</div>
<div class="train1"></div>
<div class="train2"></div>
<div class="train3"></div>
<div class="train4"></div>
<div class="mogao"></div>
</div>
</body>
</html>
2、css代码：
body {
margin: 0px;
padding: 0px;
}
/*head样式*/
.head {
width: 100%;
height: 100px;
}
.menu {
position: absolute;
left: 20px;
top: 20px;
}
.head_logo {
width: 140px;
height: 43px;
display: inline-block;
cursor: pointer;
vertical-align: middle;/*图片与文字中心对齐*/
}
.head ul {
list-style-type: none;
margin: 0px;
padding: 10px;
overflow: hidden;
}
.head ul li {
display: inline;/*水平*/
}
.head ul li a:link,
a:visited {
text-decoration: none;/*去掉链接底线*/
color: black;
width: 120px;
text-align: center;
padding: 20px;
font-size: 18px;
text-transform: uppercase;
}
.head ul li a:hover,
a:active {
color: #4182fa;
}
.search {
position: absolute;
left: 800px;
top: 25px;
border: 1px solid #ebebeb;
height: 30px;
width: 300px;
padding: 7px 16px;
border-radius: 4px;
background-color: #fcfcfc;
}
.search_data {
width: 220px;
height: 26px;
font-size: 20px;
border: none;/*去掉input的框*/
outline: none;/*去掉input输入时的框*/
line-height: 26px;
font-family: inherit;
}
.search_logo {
width: 30px;
height: 30px;
position: absolute;
left: 250px;
top: 10px;
}
.login{
position: absolute;
left: 1120px;
top: 30px;
}
.login a{
text-decoration:none ;
font-size: 20px;
}
.regin{
position: absolute;
left: 1200px;
top: 28px;
width: 120px;
height: 40px;
background-color: blue;
text-align: center;
border-radius: 20px;
line-height: 40px;
}
.regin_btn{
font-size: 20px;
color: white;
background-color: blue;
border: none;
outline: none;
}
.lunbo{
}
.imgOne{
width: 100%;
height: 500px;
display: block;
}
.imgOther{
width: 100%;
height: 500px;
display: none;
}
.imglogo{
display: inline;
width: 14%;
padding: 15px;
}
.newClass{
width: 97.5%;
margin-left: 18px;
}
.newClass_tile{
display: inline;
}
.newClass_con{
display: inline;
margin-left: 10px;
}
.newClass1{
float: left;
width: 23%;
height: 200px;
background-color: blue;
margin-left: 24px;
margin-top: 10px;
}
.newClass2{
float: left;
width: 23%;
height: 200px;
background-color: red;
margin-left: 24px;
margin-top: 10px;
}
.newClass3{
float: left;
width: 23%;
height: 200px;
background-color: green;
margin-left: 24px;
margin-top: 10px;
}
.newClass4{
float: left;
width: 23%;
height: 200px;
background-color: yellow;
margin-left: 24px;
margin-top: 10px;
}
.train{
position: relative;
top: 40px;
left: 24px;
width: 96.7%;
height: 100px;
}
.train1{
float: left;
width: 23%;
height: 200px;
background-color: blue;
margin-left: 24px;
margin-top: 100px;
}
.train2{
float: left;
width: 23%;
height: 200px;
background-color: red;
margin-left: 24px;
margin-top: 100px;
}
.train3{
float: left;
width: 23%;
height: 200px;
background-color: green;
margin-left: 24px;
margin-top: 100px;
}
.train4{
float: left;
width: 23%;
height: 200px;
background-color: yellow;
margin-left: 24px;
margin-top: 100px;
}
3、js代码：
var index = 0;
//改变图片
function ChangeImg(){
index++;
var imgClass = document.getElementsByClassName("img_slide");
if(index >= imgClass.length)
{
index = 0;
}
for(var i = 0; i< imgClass.length;i++){
imgClass[i].style.display = 'none';
}
imgClass[index].style.display = 'block';
}
//设置定时器，每隔两秒切换一张图片
setInterval(ChangeImg,2000);
4、图片：
beijing.png
fudan.png
guofang.png
jiaoshou.png
microsoft.png
qinghua.png
renzheng.png
search.png
xian.png
xuetangzaixian.png
xuetangzaixianlogo.png
xuewei.png
5、效果：
