标签：list offset == overflow lan 刷新 new amp eal
焦点轮播图相对前面讲的逐帧轮播图实现多了两个功能，1、图片轮播可以手动滚动（新增左右箭头），这里重点是实现向左滚动的无缝连接。2、多了下方小圆点，指示图片播放位置，并可以点击小圆点跳转。
那么如何实现呢？
1、无缝连接：
前面逐帧轮播图向右滚动的无缝连接实现，是将最后一张图片负值一个副本放在第一个位置。同理，实现向左无缝滚动，只需将第一张图片负值一个副本放置在最后的位置即可。形成 5 1 2 3 4 5 1这样的图片排序。同样将7张图片放在一个div下，轮播时播放变换div位置即可。
HTML代码如下：
<section class="container" id="container">
<i id="leftPo"></i>
<div class="imgs" id="imgs">
<img src="../img/5.jpeg" >
<img src="../img/1.jpeg" >
<img src="../img/2.jpeg" >
<img src="../img/3.jpeg" >
<img src="../img/4.jpeg" >
<img src="../img/5.jpeg" >
<img src="../img/1.jpeg" >
</div>
<i id="rightPo"></i>
<ul id="oul"></ul>
</section>
css代码如下：
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.container {
width: 800px;
height: 600px;
margin: 20px auto;
position: relative;
overflow: hidden;
border: 3px double red;
border-radius: 2%;
}
.imgs {
position: absolute;
display: flex;
left: -800px;
}
#leftPo {
display: inline-block;
width: 30px;
height: 30px;
background-image: url(‘../img/left.png‘);
position: absolute;
top: 285px;
left: 20px;
z-index: 1;
cursor: pointer;
opacity: 0;
transition: all linear .5s
}
#rightPo {
display: inline-block;
width: 30px;
height: 30px;
background-image: url(‘../img/right_03.png‘);
position: absolute;
top: 285px;
right: 20px;
z-index: 1;
cursor: pointer;
opacity: 0;
transition: all linear .5s
}
#oul {
/* opacity: 0;
transition: all linear .5s; */
position: absolute;
bottom: 20px;
left: 350px;
display: flex;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
margin-left: 10px;
cursor: pointer;
}
</style>
2、小圆点设置
首先创建小圆点（在前面css里面优先创建了一个类名为circle的样式设置）：
let imgs = document.getElementById(‘imgs‘);
let oi = document.getElementsByTagName(‘I‘);
let img = document.getElementsByTagName(‘IMG‘);
let oul = document.getElementById(‘oul‘);
let stopTimer1, stopTimer;
// 创建圆圈
for (let i = 0; i < img.length - 2; i++) {
let newli = document.createElement(‘li‘);
newli.className = ‘circle‘;
oul.appendChild(newli);
}
let lis = document.getElementsByTagName(‘LI‘);
// 初识第一张图片显示，给第一个圆圈选中样式
lis[0].style.width = ‘30px‘;
lis[0].style.height = ‘30px‘;
// 原点大小判断
let circle = function (lis) {
for (let i = 0; i < lis.length; i++) {
if (i == (imgs.offsetLeft) / (-800)) {
lis[i].style.width = ‘30px‘;
lis[i].style.height = ‘30px‘;
} else if ((imgs.offsetLeft) / (-800) == -1 && i == 4) {
lis[i].style.width = ‘30px‘;
lis[i].style.height = ‘30px‘;
} else {
lis[i].style.width = ‘20px‘;
lis[i].style.height = ‘20px‘;
}
}
}
在这里我给了1个初识值，即刷新页面后显示的第一张图片，对应的第一个小圆点将变大。然后创建了一个变化小圆点的函数，方便后面调用。
然后给一个for循环，当小圆点点击的时候，就跳转到对应图片上。
// 循环判断点击
for (let j = 0; j < lis.length; j++) {
lis[j].onclick = function () {
imgs.style.left = -800 * j - 800 + ‘px‘;
for (let i = 0; i < lis.length; i++) {
if (i == j) {
lis[i].style.width = ‘30px‘;
lis[i].style.height = ‘30px‘;
} else {
lis[i].style.width = ‘20px‘;
lis[i].style.height = ‘20px‘;
}
}
}
}
3、div整体图片移动函数建立，在这里给了函数一个参数speed，用于存储移动的方向及速度。
// 移动的回调函数
let move1 = function (speed) {
// 图片轮播
stopTimer1 = setInterval(function () {
imgs.style.left = imgs.offsetLeft + speed + ‘px‘;
// 当第5张播放到 5图片时，直接跳转到位于第一个的备份 5图片，这样就造成了一直无空隙播放的假象
// 判断的值 -4000为 5图片前面 共计五张图片的宽的和，然后直接跳转到left为0.
if (imgs.offsetLeft <= -img[0].offsetWidth * (img.length - 2)) {
imgs.style.left = 0 + ‘px‘;
} else if (imgs.offsetLeft >= 0) {
imgs.style.left = -img[0].offsetWidth * (img.length - 2) + ‘px‘;
}
if (imgs.offsetLeft % img[0].offsetWidth == 0) {
clearInterval(stopTimer1);
}
}, 10)
circle(lis);
}
4、建立整体移动的主函数，即程序入口。
// 每隔7秒调用1次，7秒等于 图片移动的4秒（800px，每10ms移动2px）+ 停顿的 3秒
let moveAll = function () {
let stopTimer = setInterval(function () {
rightPo.onclick();
}, 7000);
// 鼠标放在图片区域时停止滚动、并且左右箭头变为不透明，移开时移动，并且左右箭头变为透明
container.onmousemove = function () {
leftPo.style.opacity = ‘0.8‘;
rightPo.style.opacity = ‘0.8‘;
// oul.style.opacity = ‘0.8‘;
clearInterval(stopTimer);
}
container.onmouseout = function () {
leftPo.style.opacity = ‘0‘;
rightPo.style.opacity = ‘0‘;
// oul.style.opacity = ‘0‘;
moveAll();
}
}
moveAll();
5、左右箭头点击跳转，传入方向和速度进行移动
// 点击激活，每次点击后先清除计时器，防止多次点击同一个按钮后乱窜
leftPo.onclick = function () {
clearInterval(stopTimer1);
move1(20);
}
rightPo.onclick = function () {
clearInterval(stopTimer1);
move1(-20);
}
完整代码如下：
<!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>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.container {
width: 800px;
height: 600px;
margin: 20px auto;
position: relative;
overflow: hidden;
border: 3px double red;
border-radius: 2%;
}
.imgs {
position: absolute;
display: flex;
left: -800px;
}
#leftPo {
display: inline-block;
width: 30px;
height: 30px;
background-image: url(‘../img/left.png‘);
position: absolute;
top: 285px;
left: 20px;
z-index: 1;
cursor: pointer;
opacity: 0;
transition: all linear .5s
}
#rightPo {
display: inline-block;
width: 30px;
height: 30px;
background-image: url(‘../img/right_03.png‘);
position: absolute;
top: 285px;
right: 20px;
z-index: 1;
cursor: pointer;
opacity: 0;
transition: all linear .5s
}
#oul {
/* opacity: 0;
transition: all linear .5s; */
position: absolute;
bottom: 20px;
left: 350px;
display: flex;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
margin-left: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<section class="container" id="container">
<i id="leftPo"></i>
<div class="imgs" id="imgs">
<img src="../img/5.jpeg" >
<img src="../img/1.jpeg" >
<img src="../img/2.jpeg" >
<img src="../img/3.jpeg" >
<img src="../img/4.jpeg" >
<img src="../img/5.jpeg" >
<img src="../img/1.jpeg" >
</div>
<i id="rightPo"></i>
<ul id="oul"></ul>
</section>
<script>
window.onload = function () {
let imgs = document.getElementById(‘imgs‘);
let oi = document.getElementsByTagName(‘I‘);
let img = document.getElementsByTagName(‘IMG‘);
let oul = document.getElementById(‘oul‘);
let stopTimer1, stopTimer;
// 创建圆圈
for (let i = 0; i < img.length - 2; i++) {
let newli = document.createElement(‘li‘);
newli.className = ‘circle‘;
oul.appendChild(newli);
}
let lis = document.getElementsByTagName(‘LI‘);
// 初识第一张图片显示，给第一个圆圈选中样式
lis[0].style.width = ‘30px‘;
lis[0].style.height = ‘30px‘;
// 原点大小判断
let circle = function (lis) {
for (let i = 0; i < lis.length; i++) {
if (i == (imgs.offsetLeft) / (-800)) {
lis[i].style.width = ‘30px‘;
lis[i].style.height = ‘30px‘;
} else if ((imgs.offsetLeft) / (-800) == -1 && i == 4) {
lis[i].style.width = ‘30px‘;
lis[i].style.height = ‘30px‘;
} else {
lis[i].style.width = ‘20px‘;
lis[i].style.height = ‘20px‘;
}
}
}
// 移动的回调函数
let move1 = function (speed) {
// 图片轮播
stopTimer1 = setInterval(function () {
imgs.style.left = imgs.offsetLeft + speed + ‘px‘;
// 当第5张播放到 5图片时，直接跳转到位于第一个的备份 5图片，这样就造成了一直无空隙播放的假象
// 判断的值 -4000为 5图片前面 共计五张图片的宽的和，然后直接跳转到left为0.
if (imgs.offsetLeft <= -img[0].offsetWidth * (img.length - 2)) {
imgs.style.left = 0 + ‘px‘;
} else if (imgs.offsetLeft >= 0) {
imgs.style.left = -img[0].offsetWidth * (img.length - 2) + ‘px‘;
}
if (imgs.offsetLeft % img[0].offsetWidth == 0) {
clearInterval(stopTimer1);
}
}, 10)
circle(lis);
}
// 点击激活，每次点击后先清除计时器，防止多次点击同一个按钮后乱窜
leftPo.onclick = function () {
clearInterval(stopTimer1);
move1(20);
}
rightPo.onclick = function () {
clearInterval(stopTimer1);
move1(-20);
}
// 每隔7秒调用1次，7秒等于 图片移动的4秒（800px，每10ms移动2px）+ 停顿的 3秒
let moveAll = function () {
let stopTimer = setInterval(function () {
rightPo.onclick();
}, 7000);
// 鼠标放在图片区域时停止滚动、并且左右箭头变为不透明，移开时移动，并且左右箭头变为透明
container.onmousemove = function () {
leftPo.style.opacity = ‘0.8‘;
rightPo.style.opacity = ‘0.8‘;
// oul.style.opacity = ‘0.8‘;
clearInterval(stopTimer);
}
container.onmouseout = function () {
leftPo.style.opacity = ‘0‘;
rightPo.style.opacity = ‘0‘;
// oul.style.opacity = ‘0‘;
moveAll();
}
}
moveAll();
// 循环判断点击
for (let j = 0; j < lis.length; j++) {
lis[j].onclick = function () {
imgs.style.left = -800 * j - 800 + ‘px‘;
for (let i = 0; i < lis.length; i++) {
if (i == j) {
lis[i].style.width = ‘30px‘;
lis[i].style.height = ‘30px‘;
} else {
lis[i].style.width = ‘20px‘;
lis[i].style.height = ‘20px‘;
}
}
}
}
}
</script>
</body>
</html>
标签：list offset == overflow lan 刷新 new amp eal
原文地址：https://www.cnblogs.com/zhangzhiyong/p/9749800.html
