这个轮播图没包括无缝滚动
image.png
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js"></script>
</head>
<body>
<!-------------最外层容器----------------->
<div class="box">
<!-----------------放图片的容器------------------->
<div class="imglist" id="imglist">
<ul>
<li class="current"><a href="#"><img src="images/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
</ul>
</div>
<!----------------------放左右按钮的容器 --------------------------->
<div class="btn">
<span class="leftbtn" id="left"></span>
<span class="rightbtn" id="right"></span>
</div>
<!---------------放小圆圈的容器------------>
<div class="circle" id="cicle">
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
css代码
* {
margin: 0;
padding: 0;
}
.box {
width: 672px;
height: 320px;
/*border: 1px solid #ddd;*/
margin: 100px auto;
position: relative;
}
.imglist ul li img {
width: 672px;
height: 320px;
}
ul {
list-style: none;
}
.imglist ul li {
width: 672px;
height: 320px;
position: absolute;
left: 0;
top: 0;
/*默认图片全部隐藏*/
display: none;
}
/*有current类的图片显示*/
.imglist ul li.current {
display: block;
}
.btn span {
width: 24px;
height: 36px;
background: rgba(0,0,0,.5) url(../images/left.png);
position: absolute;
top: 50%;
margin-top: -18px;
}
.btn span.leftbtn {
left: 10px;
}
.btn span.rightbtn {
right: 10px;
background: url(../images/right.png);
}
.circle {
position: absolute;
bottom: 10px;
right: 10px;
}
.circle ul li {
width: 20px;
height: 20px;
background: rgba(0,0,0,.5);
border-radius: 50%;
float: left;
margin-right: 10px;
}
.circle ul li.current {
background-color: #f00;
}
js代码
window.onload = function(){
//获取元素
var imglis = document.getElementById("imglist").getElementsByTagName("li");
var leftbtn = document.getElementById("left");
var rightbtn = document.getElementById("right");
var circlelis = document.getElementById("cicle").getElementsByTagName("li");
//信号量
var index = 0;
rightbtn.onclick = function(){
index++;
changePic();
}
leftbtn.onclick = function(){
index--;
changePic();
}
//小圆点批量监听
for (var i = 0;i < circlelis.length;i++){
//绑定自定义属性
circlelis[i].idx = i;
circlelis[i].onmouseover = function(){
//鼠标进入小圆点时要更改index值
index = this.idx;
//调用图片切换的函数
changePic();
}
}
function changePic(){
if (index > imglis.length-1)index = 0;
if (index < 0)index = imglis.length - 1;
//根据信号量index做排他,实现图片的切换
for (var i = 0;i < imglis.length;i++){
imglis[i].className = '';
}
imglis[index].className = 'current';
//根据信号量index做排他,实现小圆点的切换
for (var i = 0;i < imglis.length;i++){
circlelis[i].className = '';
}
circlelis[index].className = 'current';
}
}
