释放双眼，带上耳机，听听看~！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 5000px;
}
.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;
}
#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">
<ul>
<li><img src="images/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
<ol>
<!-- 动态创建的小方块，添加在这里，样式已经给写好了-->
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script>
//思路
//1.获取对应的元素
// 获取移动的单位宽
//2.根据轮播图片的个数,来动态的生成右下角的小方块们.
// 右下角的小方块其实就是ol中的li标签
// ol中的第一个li标签要有颜色(添加一个current类)
//3.简单轮播
// 遍历ol中的每一个li标签
// 给每一个li标签添加索引
// 给每一个li标签设置单击事件.
// 颜色排他
// 获取当前点击的小方块的索引
// 计算要移动的目标位置
// 调用animate来做动画
// 注意: ******
//4.左右焦点轮播
// 显示隐藏左右焦点
// 右边焦点设置点击事件.
// 移动出去的图片张数++
// 计算移动的目标位置
// 调用animate来移动
// 右下角小方块的颜色要对应上
// 无限无缝轮播
// 左边焦点设置点击事件.
//1.获取对应的元素.
let box = document.getElementById('box'); //大盒子
let screenBox = document.querySelector('.screen');
let unitWidth = screenBox.offsetWidth; //移动的单位宽
let ul1 = screenBox.children[0]; //要动画移动的ul标签.
let lisUL = ul1.children; //ul中的所有li标签
let ol1 = screenBox.children[1]; //ol标签,装右下角所有的小方块的.
let arrDiv = document.getElementById('arr'); //左右焦点盒子
let leftSpan = document.getElementById('left'); //左焦点
let rightSpan = document.getElementById('right'); //右焦点
//2.根据轮播图图片的个数,来生成右下角的小方块.
for (let i = 0; i < lisUL.length; i++) {
//创建li标签
let liNew = document.createElement('li');
//给li标签设置内容
liNew.innerText = i + 1;
//把生成的li添加到ol中
ol1.appendChild(liNew);
}
// 默认ol中的第一个li标签有一个current类.
let lisOl = ol1.children; //ol中的所有li标签,也就是右下角的所有小方块.
lisOl[0].setAttribute('class', 'current');
//3.简单轮播
// 遍历右下角的每一个小方块(ol中的li标签们)
for (let i = 0; i < lisOl.length; i++) {
//给每一个小方块li添加索引
lisOl[i].setAttribute('index', i);
//给每一个小方块li注册点击事件.
lisOl[i].onclick = function () {
//颜色排他.
for (let j = 0; j < lisOl.length; j++) {
lisOl[j].removeAttribute('class');
}
this.setAttribute('class', 'current');
//获取当前点击的小方块的索引
let idx = this.getAttribute('index');
//计算要运动的目标位置
let target = -idx * unitWidth;
//调用animate来做动画
animate(ul1, target);
//注意: *******索引要统一
picIndex = liIndex = idx;
}
}
//4.左右焦点轮播.
//4.0 声明一个变量,用来记录图片滚出去的个数.
let picIndex = 0;
//4.0 给ul中再添加一张轮播图片(其实添加的这一张就是第一张一模一样的.)
ul1.appendChild(lisUL[0].cloneNode(true));
//4.0 声明一个变量,用来记录右下角的小方块滚出去的个数.
let liIndex = 0;
//4.1 显示隐藏左右焦点.
box.onmouseover = function () {
arrDiv.style.display = 'block';
//停止自动轮播
clearInterval(timerId);
}
box.onmouseout = function () {
arrDiv.style.display = 'none';
//重新自动轮播
timerId = setInterval(nextPic, 2000);
}
//4.2 右边焦点设置点击事件.
rightSpan.onclick = function () {
nextPic();
}
//把右边焦点点击事件代码封装成一个函数
function nextPic() {
//无限无缝轮播.
//如果当前索引是5,显示的就是克隆的哪一张(普通用户看到的是第一张)
//我们就应该马上把索引改成0,位置马上改成真正的第一张.
if (picIndex == lisUL.length - 1) {
picIndex = 0;
ul1.style.left = '0px';
}
// console.log(lisUL.length);
//移动出去的图片张数++
picIndex++;
//计算目标位置
let target = -picIndex * unitWidth;
//调用animate函数来做动画
animate(ul1, target);
//右下角小方块们的颜色要对应上.
liIndex++;
if (liIndex == lisUL.length - 1) {
liIndex = 0;
}
console.log(liIndex);
for (let i = 0; i < lisOl.length; i++) {
lisOl[i].removeAttribute('class');
}
lisOl[liIndex].setAttribute('class', 'current');
}
//4.3 左边焦点设置点击事件.
leftSpan.onclick = function () {
//无限无缝轮播.
//如果当前索引是5,显示的就是克隆的哪一张(普通用户看到的是第一张)
//我们就应该马上把索引改成0,位置马上改成真正的第一张.
if (picIndex == 0) {
picIndex = lisUL.length - 1;
ul1.style.left = -(lisUL.length - 1) * unitWidth + 'px';
}
//移动出去的图片张数--
picIndex--;
//计算目标位置
let target = -picIndex * unitWidth;
//调用animate函数来做动画
animate(ul1, target);
//右下角小方块们的颜色要对应上.
liIndex--;
if (liIndex < 0) {
liIndex = lisUL.length - 2; // 索引比图片少 1 再加上克隆的一张图片 所以 需要减去 2
}
console.log(liIndex);
for (let i = 0; i < lisOl.length; i++) {
lisOl[i].removeAttribute('class');
}
lisOl[liIndex].setAttribute('class', 'current');
}
//5.自动轮播
//设置计时器,间隔时间去调用nextPic
let timerId = setInterval(nextPic, 2000);
</script>
<script>
// 1、 匀速轮播
// 封装一个animate函数
// 01 - 运动的目标位置不写死.
// 02 - 做运动的元素不写死
// 03 - 运动的方向不写死
// function animate(ele, target) {
// //设置新计时器之前要清空老的计时器
// clearInterval(ele.timerId);
// //设置计时器
// ele.timerId = setInterval(function () {
// //获取元素当前的定位的left值
// let currentLeft = ele.offsetLeft;
// //设置步长
// let step = target > currentLeft ? 30 : -30;
// //计算运动后的位置.
// currentLeft += step;
// // console.log(currentLeft);
// //判断赋值
// if (Math.abs(target - currentLeft) > Math.abs(step)) {
// ele.style.left = currentLeft + "px";
// } else {
// ele.style.left = target + "px";
// clearInterval(ele.timerId);
// }
// }, 50);
// }
// 2、缓动轮播
//封装一个animateSlow函数
//01-运动的目标位置不写死.
//02-做运动的元素不写死
//03-运动的方向不写死
function animate(ele, target) {
//设置新计时器之前要清空老的计时器
clearInterval(ele.timerId);
//设置计时器
ele.timerId = setInterval(function () {
//获取元素当前的定位的left值
let currentLeft = ele.offsetLeft;
//设置步长
let step = (target - currentLeft) / 5;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//计算运动后的位置.
currentLeft += step;
// console.log(currentLeft);
//判断赋值
if (Math.abs(target - currentLeft) > Math.abs(step)) {
ele.style.left = currentLeft + "px";
} else {
ele.style.left = target + "px";
clearInterval(ele.timerId);
}
}, 50);
}
</script>
</body>
</html>
内容投诉
