HTML
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超星首页</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="head">
<nav class="top-nav">
<img class="logo" src="images/head-logo.png"/>
<ul class="list">
<li>
<a href="#">
<h3>首页</h3>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<h3>课程</h3>
<span>Courses</span>
</a>
</li>
<li>
<a href="#">
<h3>服务</h3>
<span>Service</span>
</a>
</li>
<li>
<a href="#">
<h3>资源</h3>
<span>Resource</span>
</a>
</li>
</ul>
<div class="search">
<img src="images/icon_search.png" >
<input type="text" placeholder="请输入课程、教师、专题、讲座名称">
</div>
<div class="login">
<img src="images/icon_login.png">
<a href="#">登录</a>
</div>
</nav>
</div>
<div class="block">
<div class="box_big ">
<div class="box"><a href="#"><img src="images/1.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/2.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/3.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/4.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/5.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/6.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/7.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/8.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/9.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/10.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/11.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/1.jpg"/></a></div>
</div>
<div class="spot">
<div class="spot_list"></div>
<div class="spot_list"></div>
<div class="spot_list"></div>
<div class="spot_list"></div>
<div class="spot_list"></div>
<div class="spot_list"></div>
<div class="spot_list"></div>
<div class="spot_list"></div>
<div class="spot_list"></div>
<div class="spot_list"></div>
<div class="spot_list"></div>
</div>
<div class="btn">
<div class="left_btn"><img src="images/icon_left.png" alt=""></div>
<div class="right_btn"><img src="images/icon_right.png" alt=""></div>
</div>
</div>
<div class="content">
<div class="index_title">
<img src="images/index_title.png">
</div>
<div class="tuijian_block">
<div class="tuijian_box_big">
<!--<div class="tuijian_box"><a href="#"><img class="tuijian" src="images/swiper7.jpg"></a></div>
<div class="tuijian_box"><a href="#"><img class="tuijian" src="images/swiper8.jpg"></a></div>
<div class="tuijian_box"><a href="#"><img class="tuijian" src="images/swiper9.jpg"></a></div>
<div class="tuijian_box"><a href="#"><img class="tuijian" src="images/swiper10.jpg"></a></div>-->
<div id="1" class="tuijian_box"><a href="#"><img src="images/swiper0.jpg"></a></div>
<div id="2" class="tuijian_box"><a href="#"><img src="images/swiper1.jpg"></a></div>
<div id="3" class="tuijian_box"><a href="#"><img src="images/swiper2.png"></a></div>
<div id="4" class="tuijian_box"><a href="#"><img src="images/swiper3.png"></a></div>
<div id="5" class="tuijian_box"><a href="#"><img src="images/swiper4.png"></a></div>
<div id="6" class="tuijian_box"><a href="#"><img src="images/swiper5.jpg"></a></div>
<div class="tuijian_box"><a href="#"><img src="images/swiper6.jpg"></a></div>
<div class="tuijian_box"><a href="#"><img src="images/swiper7.png"></a></div>
<div class="tuijian_box"><a href="#"><img src="images/swiper8.jpg"></a></div>
<div class="tuijian_box"><a href="#"><img src="images/swiper9.jpg"></a></div>
<div class="tuijian_box"><a href="#"><img src="images/swiper10.jpg"></a></div>
<div class="tuijian_box"><a href="#"><img src="images/swiper0.jpg"></a></div>
<div class="tuijian_box"><a href="#"><img src="images/swiper1.jpg"></a></div>
<div class="tuijian_box"><a href="#"><img src="images/swiper2.png"></a></div>
<div class="tuijian_box"><a href="#"><img src="images/swiper3.png"></a></div>
</div>
<div class="next">
<div class="left_btn_1"><img src="images/icon_left.png" alt=""></div>
<div class="right_btn_1"><img src="images/icon_right.png" alt=""></div>
</div>
</div>
<div class="more_class">
<img src="images/btn_look_more.png">
</div>
</div>
<hr>
<footer class="page-footer">
<img src="images/head-logo.png">
<div class="footer_content">
<div class="word">
<span class="right">关于尔雅</span>
<span class="right">常见问题</span>
<span class="right">在线客服</span>
<span>后台管理</span>
</div>
<div class="company">
Copyright©2016 超星公司旗下网站-尔雅通识课
</div>
</div>
</footer>
<script src="js/index.js"></script>
</body>
</html>
```
CSS
```
*{
margin:0;
padding:0;
}
.clears{
clear:both;
height:0;
line-height:0;
font-size:0;
overflow: hidden;
}
a{
text-decoration:none;
color: #000;
}
img{
border:none;
/*图片放在超链接里一些老的浏览器（ie）会有一个蓝色的边框*/
}
ul,li,ol{
list-style:none;
}
li{
float: left;
width: 80px;
height: 60px;
text-align: center;
padding-top: 20px;
}
.logo{
float: left;
line-height: 80px;
}
.list{
width: 400px;
margin-left: 300px;
}
.list span{
font-size: 12px;
}
.head{
width: 100%;
height: 80px;
background: #ffffff;
}
.top-nav{
/*height: 105px;*/
width: 1200px;
height: 80px;
display: block;
margin: 0 auto;
}
.search{
width: 253px;
height: 34px;
background: #f7f7f7;
float: left;
/*text-align: center;*/
line-height: 34px;
margin-top: 20px;
margin-right: 45px;
margin-left: 90px;
border-radius: 4px;
}
.search img{
width: 16px;
height: 16px;
display: inline-block;
float: left;
margin-top: 9px;
margin-right: 6px;
margin-left: 10px;
}
.search input{
border: none;
background: none;
width: 200px;
height: 34px;
font-size: 12px;
outline: none;
}
.login{
width: 105px;
height: 20px;
float: left;
margin-top: 30px;
}
.login img{
float: left;
margin-right: 5px;
}
/*.big-img{
position: absolute;
width: 1520px;
height: 580px;
!*width: 100%;*!
!*height: 100%;*!
!*display: block;*!
overflow: hidden;
}
.main_img img{
overflow: hidden;
!*display: inline-block;*!
!*animation-play-state:paused;*!
margin: 0 auto;
float: left;
width: 1520px;
height: 580px;
overflow: hidden;
!*float: left;*!
}
.main_img{
width: 16720px;
height: 580px;
position: absolute;
!*overflow: hidden;*!
!*left: 0px;*!
!*animation: move 10s ease 5s infinite;*!
!*animation-play-state:paused;*!
animation-name: move;
animation-duration: 40s;
animation-timing-function: step-start;
!*animation-timing-function: ;*!
animation-iteration-count: infinite;
}
@keyframes move {
0% {
left: 0px;
}
10% {
left: -1520px;
}
}*/
.page-footer{
width: 600px;
height: 64px;
margin: 0 auto;
padding-top: 7px;
position: relative;
/*float: left;*/
}
.page-footer img{
float: left;
}
.footer_content{
width: 380px;
height: 54px;
position: absolute;
right: 0px;
/*top: 0px;*/
/*right: 0;*/
}
.word{
width: 380px;
height: 22px;
margin-top: 11px;
text-align: center;
}
.word span{
width: 87px;
height: 22px;
display: inline-block;
color: #666666;
/*border: 1px;*/
}
.right{
border-right: 1px solid #666666;
}
.company{
font-size: 12px;
text-align: center;
margin-top: 6px;
color: #666666;
}
/* 图片轮播*/
.block {
width: 1520px;
height: 580px;
/*border: 1px solid black;*/
margin: 0 auto;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.box_big {
position: absolute;
width: 18240px;
float: left;
height: 580px;
}
.nav {
transition: margin-left 0.5s linear;
}
.box {
width: 1520px;
height: 580px;
float: left;
}
.box_big img {
width: 100%;
height: 100%;
/*display: block;*/
float: left;
}
.spot {
position: absolute;
width: 100%;
text-align: center;
bottom: 5px;
}
.spot_list {
width: 8px;
height: 8px;
/*font-size: 20px;*/
/*text-align: center;*/
border: 1px solid gray;
border-radius: 5px;
/*line-height: 30px;*/
font-weight: bolder;
margin: 10px;
display: inline-block;
background: rgba(255, 255, 255, 0.3);
}
/*.btn {
width: 100%;
height: 48px;
position: absolute;
margin: 0 auto;
top: 266px;
}*/
.left_btn,.left_btn_1{
float: left;
left: 0;
margin-left: 22px;
width: 48px;
height: 48px;
position: absolute;
}
.left_btn,.right_btn{
top: 266px;
}
.left_btn_1,.right_btn_1{
top: 106px;
}
.right_btn,.right_btn_1{
right: 0;
float: right;
margin-right: 22px;
width: 48px;
height: 48px;
position: absolute;
}
.content{
/*margin-top: 580px;*/
/*position: absolute;*/
}
.index_title{
height: 150px;
width: 100%;
background: #ffffff;
display: inline-block;
text-align: center;
margin-top: 70px;
/*line-height: 220px;*/
/*margin: 0 auto;*/
}
.tuijian_block{
/*text-align: center;*/
height: 260px;
width: 1350px;
/*margin: 0 auto;*/
position: relative;
overflow: hidden;
margin-bottom: 70px;
margin-left: auto;
margin-right: auto;
/*border: 1px solid black;*/
box-sizing: border-box;
}
.tuijian_box_big{
position: absolute;
width: 5175px;
float: left;
height: 260px;
}
.tuijian_box{
/*position: absolute;*/
width: 345px;
height: 260px;
float: left;
}
.tuijian_box img{
box-sizing: border-box;
width: 315px;
height: 100%;
float: left;
}
/*.first{
position: absolute;
left: 0;
top: 0;
}
.second{
position: absolute;
left: 345px;
top: 0;
}
.third{
position: absolute;
left: 690px;
top: 0;
}
.fourth{
position: absolute;
left: 1035px;
top: 0;
}*/
/*.next{
width: 100%;
height: 48px;
position: absolute;
margin: 0 auto;
top: 106px;
}*/
.tuijian_box img:hover{
transform: scale(0.98,0.98);
transition: all 0.2s;
border: 4px solid #902320;
}
.more_class{
/*margin: 0 auto;*/
text-align: center;
margin-bottom: 40px;
border-bottom: 1px;
}
```
JS
```
//首先获取元素，这里获取了所有需要的元素。
var box = document.getElementsByClassName("box_big")[0];
var spot = document.getElementsByClassName("spot_list");
var block = document.getElementsByClassName("block")[0];
var left_btn = document.getElementsByClassName("left_btn")[0];
var right_btn = document.getElementsByClassName("right_btn")[0];
var tuijian_block = document.getElementsByClassName("tuijian_images")[0];
var tuijian_box_big = document.getElementsByClassName("tuijian_box_big")[0];
var tuijian_box = document.getElementsByClassName("tuijian_box")[0];
var left_btn_1 = document.getElementsByClassName("left_btn_1")[0];
var right_btn_1 = document.getElementsByClassName("right_btn_1")[0];
var time = null;
spot[0].style.background = "#ffffff";
var count = 0;
showtime();
//鼠标进入计时器停止
block.onmouseenter = function () {
clearInterval(time);
};
//鼠标出来计时器打开
block.onmouseleave = function () {
showtime();
};
//点的事件
for (var i = 0; i < spot.length; i++) {
spot[i].index = i;
spot[i].onmouseenter = function () {
spot[count].style.background = "rgba(255, 255, 255, 0.3)";
this.style.background = "#ffffff";
count = this.index;
box.style.marginLeft = (count * -1520) + "px";
}
}
//图片左边划
left_btn.onclick = function () {
spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";
count--;
if (count < 0) {
box.className = "box_big";
count = box.children.length - 2;
box.style.marginLeft = "-16720px";
}
setTimeout(function () {
box.className = "box_big nav";
box.style.marginLeft = (-1520 * count) + "px";
spot[count].style.backgroundColor = "#ffffff";
}, 1);
};
//图片右边划
right_btn.onclick = function () {
mate();
};
//计时器
function showtime() {
time = setInterval(function () {
mate();
}, 5000);
}
//正常滚动
function mate() {
box.className = "box_big nav";
spot[count].style.background = "rgba(255, 255, 255, 0.3)";
count++;
spot[count > box.children.length - 2 ? 0 : count].style.background = "#ffffff";
box.style.marginLeft = (count * -1520) + "px";
setTimeout(function () {
if (count > box.children.length - 2) {
count = 0;
box.className = "box_big";
box.style.marginLeft = "0px"
}
}, 200)
}
var time_ = null;
var count_ = 0;
showtime1();
//鼠标进入计时器停止
//计时器
function showtime1() {
time_ = setInterval(function () {
mate1();
}, 5000);
}
tuijian_block.onmouseenter = function () {
clearInterval(time_);
};
//鼠标出来计时器打开
tuijian_block.onmouseleave = function () {
showtime1();
};
//正常滚动
function mate1() {
tuijian_box_big.className = "tuijian_box_big nav";
count_++;
tuijian_box_big.style.marginLeft = (count_ * -345) + "px";
setTimeout(function () {
if (count_ > tuijian_box_big.children.length - 5) {
count_ = 0;
// tuijian_box.className = "tuijian_box";
tuijian_box_big.className = "tuijian_box_big";
tuijian_box_big.style.marginLeft = "0px"
}
}, 200)
}
//图片左边划
left_btn_1.onclick = function () {
count_--;
if (count_ < 0) {
tuijian_box_big.className = "tuijian_box_big";
count_ = tuijian_box_big.children.length - 5;
tuijian_box_big.style.marginLeft = "-3795px";
}
setTimeout(function () {
tuijian_box_big.className = "tuijian_box_big nav";
tuijian_box_big.style.marginLeft = (-345 * count_) + "px";
}, 1);
};
//图片右边划
right_btn_1.onclick = function () {
mate1();
};
// document.getElementById('1').className = 'tuijian_box first'
// document.getElementById('2').className = 'tuijian_box second'
// document.getElementById('3').className = 'tuijian_box third'
// document.getElementById('4').className = 'tuijian_box fourth'
```