这是之前做一个仿极客学院网站写的代码了，年代也比较久远。原本是使用jquery写的，后来被强制改回JavaScript...鬼知道我那时经历了什么。
当时在百度上快速学习了一下相关内容，再请教一下大神，糊里糊涂就弄出来了...
直接上代码（Carousel.js），页面布局代码在文末，因为实在太长：
var img_list = document.getElementById("carousel-box").getElementsByTagName("div")[0]; //获取图片列表容器 var ori_imgs = img_list.getElementsByTagName("a"); //获取图片对象 var spans = document.getElementById("carousel-box").getElementsByTagName("div")[1].getElementsByTagName("span"); //获取圆点 var img_list_timer = null; //克隆首图片节点并添加到img_list节点后 var clone1 = ori_imgs[0].cloneNode(true); img_list.appendChild(clone1); var clone5 = ori_imgs[4].cloneNode(true); var clone4 = ori_imgs[3].cloneNode(true); img_list.insertBefore(clone5, ori_imgs[0]); img_list.insertBefore(clone4, clone5); var btnsize = spans.length; var imgs = img_list.getElementsByTagName("img"); var size = imgs.length; var viewWidth, base, pdis; var i = 3; setopc(i); var sf = 0; adjust(); window.onresize = function() { adjust(); }//这里的参数为了自适应调整了很久 function adjust() { base = document.body.clientWidth*0.09; pdis = document.body.clientWidth*0.84; for (var j = 0; j < size; j++) { imgs[j].style.width = (document.body.clientWidth*0.84).toString() + "px"; imgs[j].style.height = "450px"; } var imgsWidth = document.body.clientWidth*0.84; img_list.style.width = (imgsWidth*(imgs.length+1)).toString() + "px"; if (sf == 0) { img_list.style.left = (-(document.body.clientWidth*0.84)*3+document.body.clientWidth*0.08).toString() + "px"; sf = 1; } else { img_list.style.left = (-i*pdis+base).toString() + "px"; } } //向右轮播函数 function moveR() { i++; if (i == size-1) { img_list.style.left = -1*pdis+base; i = 2; } if (img_list_timer != null) clearInterval(img_list_timer); var current_left = img_list.offsetLeft; var current_time = 0; img_list_timer = setInterval(function() { var delta = (current_left - ((-i*pdis)+base)) / 42; img_list.style.left = (img_list.offsetLeft - delta).toString() + "px"; current_time += 1 if(current_time >= 42){ clearInterval(img_list_timer); } }, 1000 / 60); setopc(i); for(var k = 0;k < spans.length;k++) { if (k != i-2) { remove_class(spans[k], "on"); } else { add_class(spans[k], "on"); } } } function setopc(index) { for (var k = 0; k < size; k++) { if (k != index) imgs[k].style.opacity = 0.7; else imgs[k].style.opacity = 1; } } //鼠标滑过圆点 for(var j = 0;j < spans.length;j++) { (function(arg) { spans[arg].onmouseover = function() { var real_i = arg + 2; setopc(real_i); i = real_i; if (img_list_timer != null) clearInterval(img_list_timer); var current_left = img_list.offsetLeft; var current_time = 0; img_list_timer = setInterval(function() { var delta = (current_left - ((-real_i*pdis)+base)) / 42; img_list.style.left = (img_list.offsetLeft - delta).toString() + "px"; current_time += 1; if(current_time >= 42){ clearInterval(img_list_timer); } }, 1000 / 60); for(var k = 0;k < spans.length;k++) { if (k != arg) { remove_class(spans[k], "on"); } else { add_class(spans[k], "on"); } } }; })(j); } //定时自动轮播 var t = setInterval(function() { moveR(); }, 2000); //鼠标划过图片停止自动轮播 var cbox = document.getElementById("carousel-box"); cbox.onmouseover = function() { clearInterval(t); }; cbox.onmouseout = function() { t = setInterval(function() { moveR(); }, 2000); }; function has_class(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function add_class(obj, cls) { if (!has_class(obj, cls)) obj.className += " " + cls; } function remove_class(obj, cls) { if (has_class(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); } }下面是首页的HTML代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ML</title> <link rel="shortcut icon" href="img/logo/logo_red.png"> <link rel="stylesheet" href="css/HorizontalScrollstyle.css"> <link rel="stylesheet" href="css/public/myLayout.css"> <link rel="stylesheet" href="css/Carousel.css"> <link rel="stylesheet" href="css/public/header_footer.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <header> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand"><img id="header-logo" src="img/logo/logo_white.png" alt="A"></a> </div> <div class="header-menu"> <ul class="nav navbar-nav"> <li><a href="#">实战</a></li> <li class="dropdown"> <a href="#">路径<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#" class="glyphicon glyphicon-fire"> 前端工程师</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-phone"> Android工程师</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-unchecked"> PHP工程师</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-leaf"> Java工程师</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-hdd"> Linux运维工程师</a></li> </ul> </li> <li><a href="#">猿问</a></li> <li class="dropdown"> <a href="#">极客社区<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#" class="glyphicon glyphicon-question-sign"> 技术问答</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-globe"> Wiki</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-comment"> 社群</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-save"> 资源下载</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#" class="glyphicon glyphicon-phone"></a></li> <li><a href="login.html">登录</a></li> <li><a href="register.jsp">注册</a></li> </ul> <div class="nav navbar-nav navbar-right"> <form id="rearch-box" role="search"> <input type="text" placeholder="Search"> <button><span class="glyphicon glyphicon-search"></span></button> </form> </div> </div> </div> </nav> </header> <main class="main"> <!-- 轮播图 --> <div id="carousel-box"> <div id="img_list"> <a href="#"><img class="LunboImg" src="img/index/1.jpg" alt="1"/></a> <a href="#"><img class="LunboImg" src="img/index/2.jpg" alt="2"/></a> <a href="#"><img class="LunboImg" src="img/index/3.jpg" alt="3"/></a> <a href="#"><img class="LunboImg" src="img/index/4.jpg" alt="4"/></a> <a href="#"><img class="LunboImg" src="img/index/5.jpg" alt="5"/></a> </div> <div id="point"> <span></span> <span class="on"></span> <span></span> <span></span> <span></span> </div> </div> <!--课程滚条--> <div id="Horizontal"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-12 col-lg-12"> <div class="page-header"> <h2><span class="glyphicon glyphicon-signal"></span> 最新课程<a href="#" class="more_inf">更多 ></a></h2> </div> </div> </div> <div class="row" id="Horizontal-Scroll"> <div id="content-1" class="content horizontal-images"> <table id="light-box"> <tr> <ul > <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> </ul> </tr> </table> </div> </div> </div> </div> <div class="container class_show"> <div class="row"> <div class="col-xs-12 col-md-12 col-lg-12"> <div class="page-header"> <h2> <span class="glyphicon glyphicon-signal"></span> 免费好课<a href="#" class="more_inf">更多 ></a></h2> </div> </div> </div> <div class="row" style="box-shadow: 3px 3px 5px rgba(9,9,9,0.5);"> <div class="col-xs-2 col-md-2 col-lg-2 work_show_left" style="background-image: url(img/index/Web1.png);background-size: cover"> <br> <h2>Web<br>前端工程师</h2> <p><a href="#">职业路径 ></a></p> <ul> <li><a href="#">jQuery源码探索之旅1</a> </li> <li><a href="#">jQuery源码探索之旅2</a> </li> <li><a href="#">jQuery源码探索之旅3</a> </li> </ul> </div> <div class="col-xs-8 col-md-8 col-lg-8 work_show_middle"> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP2.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP1.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP1.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP2.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> </div> <div class="col-xs-2 col-md-2 col-lg-2 work_show_right"> <a href="#"><img src="img/index/SmallIP3.jpg"></a> <div></div> <ul> <li><a href="#">鼠标悬浮效果</a> </li> <li><a href="#">阿里云在线编辑</a> </li> <li><a href="#">AngulJS实战</a> </li> <li><a href="#">Html/CSS基础</a> </li> <li><a href="#">Html/CSS进阶</a> </li> <li><a href="#">Html/CSS高级</a> </li> <li><a href="#">Html/CSS实战</a> </li> </ul> </div> </div> <div class="row" style="box-shadow: 3px 3px 5px rgba(9,9,9,0.5);"> <div class="col-xs-2 col-md-2 col-lg-2 work_show_left" style="background-image: url(img/index/Web2.png);background-size: cover"> <br> <h2>Java<br>工程师</h2> <p><a href="#">职业路径 ></a></p> <ul> <li><a href="#">jQuery源码探索之旅1</a> </li> <li><a href="#">jQuery源码探索之旅2</a> </li> <li><a href="#">jQuery源码探索之旅3</a> </li> </ul> </div> <div class="col-xs-8 col-md-8 col-lg-8 work_show_middle"> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP2_2.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP10.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP2_1.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP9.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> </div> <div class="col-xs-2 col-md-2 col-lg-2 work_show_right"> <a href="#"><img src="img/index/SmallIP8.jpg"></a> <div></div> <ul> <li><a href="#">鼠标悬浮效果</a> </li> <li><a href="#">阿里云在线编辑</a> </li> <li><a href="#">AngulJS实战</a> </li> <li><a href="#">Html/CSS基础</a> </li> <li><a href="#">Html/CSS进阶</a> </li> <li><a href="#">Html/CSS高级</a> </li> <li><a href="#">Html/CSS实战</a> </li> </ul> </div> </div> <div class="row" style="box-shadow: 3px 3px 5px rgba(9,9,9,0.5);"> <div class="col-xs-2 col-md-2 col-lg-2 work_show_left" style="background-image: url(img/index/Web3.png);background-size: cover"> <br> <h2>Android<br>工程师</h2> <p><a href="#">职业路径 ></a></p> <ul> <li><a href="#">jQuery源码探索之旅1</a> </li> <li><a href="#">jQuery源码探索之旅2</a> </li> <li><a href="#">jQuery源码探索之旅3</a> </li> </ul> </div> <div class="col-xs-8 col-md-8 col-lg-8 work_show_middle"> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP3_2.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP7.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP3_1.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP6.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> </div> <div class="col-xs-2 col-md-2 col-lg-2 work_show_right"> <a href="#"><img src="img/index/SmallIP5.jpg"></a> <div></div> <ul> <li><a href="#">鼠标悬浮效果</a> </li> <li><a href="#">阿里云在线编辑</a> </li> <li><a href="#">AngulJS实战</a> </li> <li><a href="#">Html/CSS基础</a> </li> <li><a href="#">Html/CSS进阶</a> </li> <li><a href="#">Html/CSS高级</a> </li> <li><a href="#">Html/CSS实战</a> </li> </ul> </div> </div> </div> </main> <footer> <div class="container"> <div class="row"> <a href="##"><img src="img/logo/Sina.png"></a> <a href="##"><img src="img/logo/wechat.png"></a> <a href="##"><img src="img/logo/qq.png"></a> <a href="##"><img src="img/logo/qqBlog.png"></a> <a href="##"><img src="img/logo/qqSpace.png"></a> <p> <a href="#">企业合作</a> <a href="#">联系我们</a> <a href="#">讲师招募</a> <a href="#">常见问题</a> <a href="#">意见反馈</a> <a href="#">友情链接</a> </p> </div> </div> <div> <p style="width:100%; height:1px; background-color: #ccc;margin-bottom: 2.5rem"></p> <p>© 2016 www.bl.com 京ICP备130236642号(伪造)</p> </div> </footer> <script type="text/javascript" src="js/Carousel.js"></script> <script type="text/javascript" src="js/Scroll.js"></script> <script type="text/javascript" src="js/header.js"></script> </body> </html>现在让我再看这份代码，唯一的感觉就是，快速学习能力太重要了...
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
