温柔要有,但是不妥协,我们要在安静中不慌不忙的坚强。
话不多说,来看代码
<!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>
.box {
width: 500px;
height: 400px;
border: solid 1px black;
position: relative;
margin: auto;
overflow: hidden;
}
.box ul,
.box ol {
list-style: none;
padding: 0;
margin: 0;
}
.box ul li {
width: 500px;
height: 400px;
display: none;
}
.box ul li img {
width: 500px;
height: 400px;
}
.box ol {
width: 120px;
position: absolute;
left: 50%;
margin-left: -40px;
bottom: 20px;
height: 20px;
background: #fff;
display: flex;
justify-content: space-evenly;
padding: 10px 0;
border-radius: 20px;
}
.box ol li {
width: 20px;
height: 20px;
border-radius: 50%;
background: #f00;
border: 1px solid #999;
}
.box ol li.current {
background: #00f;
}
.box ul li.current {
display: block;
}
.box .left,
.box .right {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
background: #ccc;
text-align: center;
line-height: 30px;
text-decoration: none;
font-weight: bold;
color: #fff;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="current"><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
</ul>
<ol>
<li class="current"> </li>
<li></li>
<li></li>
</ol>
<a href="javascript:;" class="left"><</a>
<a href="javascript:;" class="right">></a>
</div>
</body>
<script>
//获取所有的元素
var ul = document.querySelectorAll('ul li')
var ol = document.querySelectorAll('ol li')
var box = document.querySelector('.box')
var cu = document.querySelector('ul li .current')
var l = document.querySelector('.left')
var r = document.querySelector('.right')
var num = 0
//一开始就要开始定时器
// var time
var time = setInterval(right, 1000)
//当鼠标不在图片上面的时候,就开启定时器
box.onmouseout = function() {
time = setInterval(right, 1000)
// time = setInterval(function() {
// num++
// if (num > 2) {
// num = 0
// }
// console.log(num);
// //开始移动,将所有的类名置空
// for (i = 0; i < ol.length; i++) {
// ol[i].className = ''
// ul[i].className = ''
// }
// //把要显示的那个加上类名,让哪一个显示呢
// ol[num].className = 'current'
// ul[num].className = 'current'
// }, 1000)
}
//鼠标在上面,停止定时器
box.onmouseover = function() {
clearInterval(time)
}
//定时器开始,要开始移动所有的图片
function move() {
//开始移动,将所有的类名置空,到谁就给谁类名让他显示
for (var i = 0; i < ol.length; i++) {
ol[i].className = ''
ul[i].className = ''
}
//不确定现在是哪一个,所以给一个num值为0
// console.log(num);
ol[num].className = 'current'
ul[num].className = 'current'
}
//向左移动的时候
function left() {
//找到下标,把下标给move
num--
if (num < 0) {
num = ul.length - 1
}
move()
}
//向右移动,同理找到下标给move让他移动
function right() {
num++
if (num == ul.length) {
num = 0
}
// console.log(num);
move()
}
//当点击左右的时候,进行换位
r.onclick = right //此时不是调用
l.onclick = left //此时不是调用
//点击下面的ol会停在某一页面
for (var j = 0; j < ol.length; j++) {
ol[j].index = j
ol[j].onclick = function() {
num = this.index
console.log(num);
move()
}
}
</script>
</html>