-
原理:
-
- html和css:先通过定位使所有图片重叠在一个位置,然后利用z-index让图片展示,把左右箭头和圆点的z-index设置的比图片高,这样不会被图片所覆盖,通过伪类的方式将左右按钮隐藏和展示
-
- js:用classsName会覆盖class的特性来清除和添加z-index属性,使图片展示,通过间隔计时器添加z-index从而实现轮播图的功能
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
.wrap {
margin: 0 auto;
width: 800px;
height: 400px;
position: relative;
}
.list {
width: 800px;
height: 400px;
position: relative;
margin: 0 auto;
}
.item {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
left: 0;
}
.item:nth-child(1) {
background-color: gold;
}
.item:nth-child(2) {
background-color: red;
}
.item:nth-child(3) {
background-color: yellow;
}
.item:nth-child(4) {
background-color: blue;
}
.item:nth-child(5) {
background-color: orange;
}
.item.active {
z-index: 10;
}
.btn {
width: 60px;
height: 100px;
z-index: 100;
top: 150px;
position: absolute;
display: none;/*隐藏按钮*/
}
.wrap:hover .btn{
display: block;/*显示按钮*/
}
#leftbtn {
left: 0px;
}
#rightbtn {
right: 0px;
}
.pointList {
list-style: none;
padding-left: 0px;
position: absolute;
right: 20px;
bottom: 20px;
z-index: 200;
}
.point {
width: 10px;
height: 10px;
background-color: antiquewhite;
border-radius: 100%;
float: left;
margin-right: 8px;
border-style: solid;
border-width: 2px;
border-color: slategray;
cursor: pointer;
}
.point.active{
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<li class="item active">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
<ul class="pointList">
<li class="point active" data-index = 0></li>
<li class="point" data-index = 1></li>
<li class="point" data-index = 2></li>
<li class="point" data-index = 3></li>
<li class="point" data-index = 4></li>
</ul>
<button class="btn" id="leftbtn"> < </button>
<button class="btn" id="rightbtn"> > </button>
</div>
<script>
var items = document.querySelectorAll(".item");
//图片绑定
var points = document.querySelectorAll(".point")
//点绑定
var left = document.getElementById("leftbtn");
var right = document.getElementById("rightbtn");
//左右按钮绑定
var all = document.querySelector(".wrap")
//外部盒子绑定
var index = 0;
var time = 0;
//定时器参数初始化
//清除active方法,用classsName会覆盖class的特性来清除active
var clearActive = function () {
for (i = 0; i < items.length; i++) {
items[i].className = 'item';
}
for (j = 0; j < points.length; j++) {
points[j].className = 'point';
}
}
//改变active方法,给想要展示的图片和圆点同时加上'item active'
var goIndex = function () {
clearActive();
items[index].className = 'item active';
points[index].className = 'point active'
}
//通过按钮事件来使图片和圆点同时切换
//左按钮事件
var goLeft = function () {
if (index == 0) {
index = 4;
} else {
index--;
}
goIndex();
}
//右按钮事件
var goRight = function () {
if (index < 4) {
index++;
} else {
index = 0;
}
goIndex();
}
//绑定点击事件监听,点击后计时器跳转清零
left.addEventListener('click', function () {
goLeft();
time = 0;
})
right.addEventListener('click', function () {
goRight();
time = 0;
})
for(i = 0;i < points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index')
index = pointIndex;//在这里给index赋值
goIndex();//使用goIndex,使需要展示的图片展示出来
time = 0;//计时器清零
})
}
//间隔计时器
var timer;
function play(){
timer = setInterval(function(){
time ++;
if(time == 10 ){
goRight();
time = 0;
}
},100)
}
play();
//移入清除计时器,实现鼠标移入图片静止
all.onmousemove = function(){
clearInterval(timer)
}
//移出启动计时器,鼠标滑出图片开始轮播
all.onmouseleave = function(){
play();
}
</script>
</body>
</html>
显示为
轮播图.html - Google Chrome