common.js内容：
// 定义一个获取元素的函数
function my$(id) {
return document.getElementById(id);
}
// DOM 2 级事件绑定方式
// 自己制作一个兼容所有浏览器的绑定事件的函数
// 参数：事件源，事件类型，事件函数
function addEvent(ele, type, fn) {
// IE 9 及以上的浏览器和其他浏览器，使用 addEventListener 方法
// IE 9 以下的浏览器，使用 attachEvent 方法
// 浏览器能力检测
if (ele.addEventListener) {
ele.addEventListener(type, fn);
} else if (ele.attachEvent) {
ele.attachEvent("on" + type, fn);
}
}
// 兼容所有浏览器的 解除绑定事件的函数
// 参数：事件源，事件类型，事件函数
function removeEvent(ele, type, fn) {
// 浏览器能力检测
if (ele.removeEventListener) {
ele.removeEventListener(type, fn);
} else if (ele.detachEvent) {
ele.detachEvent("on" + type, fn);
}
}
html文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.carousel{
position: relative;
width: 880px;
height: 550px;
border: 1px solid #333;
margin: 50px auto;
}
.pic li{
position: absolute;
left: 0;
top: 0;
width: 880px;
height: 550px;
display: none;
}
.pic li.current{
display: block;
}
.btn a{
position: absolute;
top: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
background-color: rgba(255,255,255,0.3);
text-decoration: none;
color: #444;
text-align: center;
line-height: 80px;
font-size: 60px;
font-family: "SimSun";
}
.btn .left{
left: 10px;
}
.btn .right{
right: 10px;
}
.btn a:hover{
background-color: rgba(255,255,255,0.7);
}
.sub{
position: absolute;
bottom: 30px;
left: 50%;
width: 200px;
height: 40px;
margin-left: -100px;
border-radius: 20px;
background-color: rgba(255,255,255,0.3);
}
.sub li{
float: left;
width: 20px;
height: 20px;
margin: 10px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.sub li.current{
background-color: #0ff;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul class="pic" id="pic">
<li class="current"><img src="images/lunbo/01.jpg" alt=""></li>
<li><img src="images/lunbo/02.jpg" alt=""></li>
<li><img src="images/lunbo/03.jpg" alt=""></li>
<li><img src="images/lunbo/04.jpg" alt=""></li>
<li><img src="images/lunbo/05.jpg" alt=""></li>
</ul>
<div class="btn" id="btn">
<a href="javascript:;" class="left" id="leftbtn"><</a>
<a href="javascript:;" class="right" id="rightbtn">></a>
</div>
<ol class="sub" id="sub">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script src="common.js"></script>
<script>
// 编程思路：信号量编程，通过一个全局变量的信号量，
// 在不同的事件函数中进行信息传递，让多个事件进行协同作业
// 1.获取元素
var carousel = my$("carousel");
var ul = my$("pic");
var ulLis = ul.children;
var leftbtn = my$("leftbtn");
var rightbtn = my$("rightbtn");
var ol = my$("sub");
var olLis = ol.children;
// 全局信号量，存储的是要展示的图片所在 li 的下标
var idx = 0;
// 2.右按钮事件，切换到下一张
rightbtn.onclick = rightHandle;
// 3.左按钮事件，切换到上一张
leftbtn.onclick = function () {
// 信号量自减
idx--;
// 判断 idx 是否是超过最小的下标，如果是，就相当于从第一张要切换到最后一张
if (idx < 0) {
idx = ulLis.length - 1;
}
// 调用一个切换函数
change();
};
// 4.下标小圆点事件，点哪个小圆点，对应展示图片
for (var i = 0 ; i < olLis.length; i++) {
// 存储自己的下标
olLis[i].index = i;
// 给每个小圆点添加点击事件，然后获取对应下标，赋值给信号量
olLis[i].onclick = function () {
// 获取当前点击的元素的下标
// this.index
idx = this.index;
// 调用一个切换函数
change();
};
}
// 5.轮播图自动播放,执行类似右按钮的事件
var timer;
timer = setInterval(rightHandle,3000);
// 6.鼠标移上轮播图，停止自动轮播
carousel.onmouseover = function () {
clearInterval(timer);
};
// 7.鼠标离开轮播图，重新开始自动轮播
carousel.onmouseout = function () {
timer = setInterval(rightHandle,3000);
};
// 定义 右按钮事件函数
function rightHandle() {
// 信号量自加
idx++;
// 判断 idx 是否是超过最大的下标，如果是，就相当于从最后一张要切换到第一张
if (idx > ulLis.length - 1) {
idx = 0;
}
// 调用一个切换函数
change();
}
// 定义切换函数
function change() {
// 排他思想
// 对应控制
// 让所有 li 标签清除类名
for (var i = 0 ; i < ulLis.length ; i++) {
ulLis[i].className = "";
olLis[i].className = "";
}
// 保留自己
ulLis[idx].className = "current";
olLis[idx].className = "current";
}
</script>
</body>
</html>
