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">
- </div>
- <div class="right_btn">
- <img src="images/icon_right.png">
- </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">
- </div>
- <div class="right_btn_1">
- <img src="images/icon_right.png">
- </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'
- ```
来源: http://www.bubuko.com/infodetail-3456565.html