<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul,
ol {
list-style: none;
}
.carousel {
position: relative;
width: 880px;
height: 550px;
margin: 50px auto;
}
.pic li {
position: absolute;
left: 0;
top: 0;
display: none;
}
.pic li.current {
display: block;
}
.btn a {
position: absolute;
top: 50%;
margin-top: -40px;
display: block;
width: 80px;
height: 80px;
background-color: rgba(255, 255, 255, 0.3);
text-decoration: none;
text-align: center;
font-size: 60px;
line-height: 80px;
color: #444;
font-family: "SimSun";
}
.btn .left {
left: 10px;
}
.btn .right {
right: 10px;
}
.btn a:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.sub {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -100px;
display: block;
width: 200px;
height: 40px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 20px;
}
.sub li {
float: left;
margin: 10px;
display: block;
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
.sub li.current {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul class="pic" id="pic">
<li class="current"><a href=""><img src="images/lunbo/01.jpg" alt=""></a></li>
<li><a href=""><img src="images/lunbo/02.jpg" alt=""></a></li>
<li><a href=""><img src="images/lunbo/03.jpg" alt=""></a></li>
<li><a href=""><img src="images/lunbo/04.jpg" alt=""></a></li>
<li><a href=""><img src="images/lunbo/05.jpg" alt=""></a></li>
</ul>
<div class="btn">
<a href="javascript:void(0);" class="left" id="left"><</a>
<a href="javascript:void(0);" class="right" id="right">></a>
</div>
<ol class="sub" id="sub">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
<script>
var carousel = document.getElementById("carousel");
var left = document.getElementById("left");
var right = document.getElementById("right");
var pic = document.getElementById("pic");
var ulLis = pic.children;
var sub = document.getElementById("sub");
var olLis = sub.children;
//信号量编程
//通过一个全局变量的信号量, 在不同的事件函数中进行信息传递
//全局信号量, 存储的是要展示的图片所在的li的下标
var idx = 0;
right.onclick = function () {
rightHandel();
};
left.onclick = function () {
idx--;
if (idx < 0) {
idx = ulLis.length - 1;
}
//切换函数
change();
};
//点击小圆点
for(var i = 0; i<olLis.length;i++){
//绑定下标
olLis[i].index = i;
olLis[i].onclick = function(){
idx = this.index;
change();
}
}
var timer;
//自动播放
timer = setInterval(rightHandel,2000);
carousel.onmouseover = function(){
clearInterval(timer);
}
carousel.onmouseout = function(){
timer = setInterval(rightHandel,2000);
}
//右按钮事件函数
function rightHandel(){
idx++;
if (idx > ulLis.length - 1) {
idx = 0;
}
change();
}
//切换函数
function change() {
//排他思想
//对应控制
for (var i = 0; i < ulLis.length; i++) {
ulLis[i].className = "";
olLis[i].className = "";
}
ulLis[idx].className = "current";
olLis[idx].className = "current";
}
</script>
</html>
