轮播图
<!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 {
list-style: none;
}
.slider {
width: 590px;
height: 470px;
border: 5px solid black;
position: relative;
overflow: hidden;
}
.slider .list li {
position: absolute;
opacity: 0;
transition: opacity .3s;
}
.slider .list li.current {
opacity: 1;
z-index: 2;
}
.btn {
position: absolute;
top: 50%;
width: 80px;
height: 40px;
background: black;
color: white;
opacity: .3;
z-index: 3;
font-size: 35px;
text-align: center;
line-height: 40px;
border-radius: 10px;
cursor: pointer;
}
.btn:hover {
opacity: 1;
}
.prev {
left: -20px;
}
.next {
right: -20px;
}
.pagination {
position: absolute;
bottom: 20px;
z-index: 2;
left: 30px;
}
.pagination li {
float: left;
margin-left: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
opacity: .5;
border: 3px solid rgba(255, 66, 0, .2);
cursor: pointer;
}
.pagination li:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<ul class="list">
<li class="current"><a href="#1"><img src="./imgs/pic (1).jpg" alt=""></a></li>
<li><a href="#2"><img src="./imgs/pic (2).jpg" alt=""></a></li>
<li><a href="#3"><img src="./imgs/pic (3).jpg" alt=""></a></li>
<li><a href="#4"><img src="./imgs/pic (4).jpg" alt=""></a></li>
</ul>
<div class="btn prev"><</div>
<div class="btn next">></div>
<ul class="pagination">
<li class="bullet"></li>
<li class="bullet"></li>
<li class="bullet"></li>
<li class="bullet"></li>
</ul>
</div>
<script>
//定义一个全局变量，来表示当前显示的图片的索引
var currentIndex = 0;
// 将轮播切换到指定的图片上
function slideTo(index) {
if (index === 4) {
index = currentIndex = 0
}
if (index === -1) {
index = currentIndex = 3;
}
var lis = document.querySelectorAll('.slider .list li');
//清除旧焦点
//xxx.classList.remove(yyyClass)
//xxx.classList.add(xxxClass)
document.querySelector('.current').classList.remove('current');
lis[index].classList.add('current')
}
function slideNext() {
currentIndex++
slideTo(currentIndex)
}
function slidePrev() {
currentIndex--
slideTo(currentIndex)
}
//绑定事件
document.querySelector('.slider .prev').onclick = function () {
slidePrev()
}
document.querySelector('.slider .next').onclick = function () {
slideNext()
}
var bullets = document.querySelectorAll('.pagination .bullet');
for (var i = 0; i < bullets.length; i++) {
bullets[i].index = i;
bullets[i].onmouseover = function () {
// console.log(this.index);
currentIndex = this.index;
slideTo(currentIndex)
}
}
document.querySelector('.slider').onmouseover = function () {
stop()
}
document.querySelector('.slider').onmouseout = function () {
auto()
}
//自动轮播
var id;
function auto() {
id = setInterval(function () {
slideNext();
}, 3000)
}
function stop() {
clearInterval(id)
}
auto();
</script>
</body>
</html>
