<!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>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 600px;
height: 400px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
img {
display: block;
}
ul {
list-style: none;
}
.list {
width: 4200px;
position: absolute;
left: -600px;
top: 0;
}
.list li {
float: left;
}
a {
width: 40px;
height: 40px;
line-height: 36px;
position: absolute;
top: 50%;
margin-top: -20px;
text-decoration: none;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.5);
color: #fff;
font-size: 30px;
background-color: rgba(0, 0, 0, 0.3);
transition: 0.4s;
opacity: 0;
}
.container:hover a {
opacity: 1;
}
.prev {
left: 40px;
}
.next {
right: 40px;
}
.pointsDiv {
width: 200px;
height: 30px;
position: absolute;
bottom: 30px;
left: 50%;
/* background-color: #fff; */
margin-left: -100px;
}
.pointsDiv>span {
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: skyblue;
border: 2px solid #fff;
}
.pointsDiv>span+span {
margin-left: 20px;
}
.pointsDiv>span.active {
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<ul class="list">
<li>
<img src="/JS_DOM_day07/img/5.jpg" alt="">
</li>
<li>
<img src="/JS_DOM_day07/img/1.jpg" alt="">
</li>
<li>
<img src="/JS_DOM_day07/img/2.jpg" alt="">
</li>
<li>
<img src="/JS_DOM_day07/img/3.jpg" alt="">
</li>
<li>
<img src="/JS_DOM_day07/img/4.jpg" alt="">
</li>
<li>
<img src="/JS_DOM_day07/img/5.jpg" alt="">
</li>
<li>
<img src="/JS_DOM_day07/img/1.jpg" alt="">
</li>
</ul>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
<div class="pointsDiv">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
window.onload = function () {
// 获取元素对象
// 获取整个页面主体
var container = document.querySelector('.container');
// 获取所有的图片
var list = document.querySelector('.list');
// 获取按钮
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
// 获取小圆点集合
var points = document.querySelectorAll('.pointsDiv>span');
// 定义动画总时长
var time = 3000;
// 定义动画帧时长
var itemTime = 30;
// 定义图片宽度
var pageWidth = 600;
// 获取小圆点的个数
var showNum = points.length;
//初始化索引
var index = 0;
// 定义标识变量 用于标记当前动画是否正在移动中
var isMovIng = false;
//绑定点击事件 先是点击按钮进行翻页 点击按钮 向上或向下翻页
prev.onclick = function () {
//封装函数 调用方法
nextPage(false);
};
next.onclick = function () {
//封装函数 调用方法
nextPage(true);
};
// 小圆点点击
for (var i = 0; i < points.length; i++) {
points[i].index = i;
points[i].onclick = function () {
nextPage(this.index);
}
}
// 自动轮播
var autoTimer = setInterval(function(){
nextPage(true);
},3000);
container.onmouseover = function(){
clearInterval(autoTimer);
};
container.onmouseout = function(){
autoTimer = setInterval(function(){
nextPage(true);
},3000)
}
// next 两种情况
// 1、当next为false的话 点击prev按钮 看左侧图片 left增加图片宽度
// 2、当next为true的话 点击next按钮 看右侧图片 left减少图片宽度
function nextPage(next) {
if (isMovIng) {
return
}
isMovIng = true;
// 判断总偏移
if (typeof next == 'boolean') {
var offset = next ? -pageWidth : pageWidth;
}else{
var offset = -(next - index) * pageWidth;
}
// 计算单次偏移
var itemOffset = offset / (time / itemTime);
//获取list当前left值
var left = list.offsetLeft;
//计算目的地left值 = 当前位置 + 总偏移
var targetLeft = left + offset;
var timer = setInterval(function () {
left += itemOffset;
// 当前位置 = 目的地的位置时 清除清时期 完成翻页
if (left == targetLeft) {
clearInterval(timer);
isMovIng = false;
// 因为当前位置等于目的地的位置之后 翻页结束 清除清时期 我们才需要去判断是否在假5或假1
if (left == 0) {
// 说明用户在真1 又点击了prev按钮 切换到假5（实际排列的第一张） 需要切换到真5（倒数第二张）
// 倒数第二张的left值 = -（实际显示张数*图片宽度);
left = -showNum * pageWidth;
} else if (left == -(showNum + 1) * pageWidth) {
//说明用户在真5 点击了next按钮 切换到假一
left = -pageWidth;
}
}
list.style.left = left + 'px';
}, itemTime)
upDate(next)
function upDate(next) {
if(typeof next == 'boolean'){
var targetIndex = next ? index + 1 : index - 1;
}else{
var targetIndex = next;
}
if (targetIndex < 0) {
targetIndex = showNum = -1;
} else if (targetIndex > showNum - 1) {
targetIndex = 0;
}
points[index].className = '';
points[targetIndex].className = 'active';
// 更新索引 对于下一次点击来说 当前这一次刚刚添加了高亮
index = targetIndex;
}
}
}
轮播图获取涉及的相关变量
container 区域容器
list 图片容器
prev 点击按钮
next 点击按钮
points 小圆点集合
time 定义动画总时长
itemTime 定义动画帧时长
pageWidth 定义图片宽度
list 当前left值
targetLeft 目的地left值
timer 动画接收变量
showNum 获取小圆点长度
