本文分享了一段使用纯JavaScript实现的轮播图代码，该代码最初为模仿极客学院网站而编写。文章详细介绍了轮播图的实现原理及自动轮播功能，并展示了首页的部分HTML结构，包括导航栏、轮播图和课程展示等。
这是之前做一个仿极客学院网站写的代码了，年代也比较久远。原本是使用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>
现在让我再看这份代码，唯一的感觉就是，快速学习能力太重要了...
扫一扫
1073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
