<!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;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 300px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 300px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0px;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
z-index: 1000;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen" id="screen">
<ul>
<li>
<img src="images/1.jpeg" width="500" height="300" />
</li>
<li>
<img src="images/2.jpeg" width="500" height="300" />
</li>
<li>
<img src="images/3.jpeg" width="500" height="300" />
</li>
<li>
<img src="images/4.jpeg" width="500" height="300" />
</li>
<li>
<img src="images/5.jpeg" width="500" height="300" />
</li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</body>
<script src="js/01-轮播图动画.js"></script>
<script>
// 1. 获取元素
var box = document.querySelector("#box");
var screen = document.querySelector('#screen')
var arr = document.querySelector("#arr");
var ulObj = document.querySelector("#screen ul");
var olObj = document.querySelector('ol');
var left = document.querySelector("#left");
var right = document.querySelector("#right")
var ulLis = ulObj.children;
var olLis = olObj.children;
var imgW = screen.offsetWidth;
var flag = true;
var index = 0;
var circle = 0;
var t = '';
//2. 鼠标经过box 就显示隐藏左右按钮
box.onmouseover = function () {
arr.style.display = 'block';
clearInterval(t);
t = null;// 清除定时器变量
}
box.onmouseout = function () {
arr.style.display = 'none';
t = setInterval(function () {
right.onclick();//手动调用点击事件
}, 3000)
}
// 3. 动态生成小圆圈 有几张图片,我就生成几个小圆圈
for (var i = 0; i < ulLis.length; i++) {
// 创建一个小li
var li = document.createElement('li');
// 记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index', i);
// 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
li.onclick = function () {
// 当我们点击了某个小li 就拿到当前小li 的索引号
index = this.getAttribute('index');
circle = index;
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = '';
}
this.className = 'current';
animation(ulObj, -imgW * index)
}
li.innerHTML = i + 1;
// 把小li插入到ol 里面
olObj.appendChild(li);
}
// 把ol里面的第一个小li设置类名为 current
olLis[0].className = 'current';
// 6. 克隆第一张图片(li)放到ul 最后面
var last = ulLis[0].cloneNode(true);
ulObj.appendChild(last);
left.onclick = function () {
if (flag) {
flag = false;
if (index == 0) {
index = ulLis.length - 1;
ulObj.style.left = -imgW * index + 'px';
}
index--;
animation(ulObj, -imgW * index, function () {
flag = true;
})
circle--;
circle = circle < 0 ? olLis.length - 1 : circle;
circleChange();
}
}
right.onclick = function () {
if (flag) {
flag = false;
if (index == olLis.length) {
ulObj.style.left = 0;
index = 0;
}
index++;
animation(ulObj, -imgW * index, function () {
flag = true;
})
circle++;
circle = circle == olLis.length ? 0 : circle;
circleChange();
}
}
function circleChange() {
// 先清除其余小圆圈的current类名
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = '';
}
// 留下当前的小圆圈的current类名
olLis[circle].className = 'current';
}
t = setInterval(function () {
right.onclick();
}, 2000)
</script>
</html>