El principio del carrusel:
una serie de imágenes del mismo tamaño están en mosaico, y solo se muestra una imagen usando el diseño CSS, y el resto se oculta. Utilice el temporizador para realizar la reproducción automática calculando la compensación, o cambie la imagen haciendo clic manualmente en el evento.
Diseño HTML El
cuadro contenedor principal almacena todo el contenido, la pantalla contenedor secundario almacena la imagen y el actual almacena el número del botón. Cuando
se mueve hacia la izquierda / derecha, aparece una flecha, haga clic en izquierda y derecha para deslizar el efecto de imagen
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="image/timg.jpg" width="500" height="200" /></li>
<li><img src="image/11.jpg" width="500" height="200" /></li>
<li><img src="image/timg2.jpg" width="500" height="200" /></li>
<li><img src="image/timg3.jpg" width="500" height="200" /></li>
<li><img src="image/timg4.jpg" width="500" height="200" /></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
Establecer desbordamiento: oculto en la pantalla de diseño CSS , solo puede mostrar la imagen del tamaño de la ventana gráfica y el resto está oculto.
El comentario aquí es para facilitar la observación del efecto.
<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: 3500px;//五张图片加两张复制的宽度
}
.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>js parte
1: cuando entra el mouse, se muestran las flechas izquierda y derecha, el mouse se mueve hacia afuera y las flechas se ocultan
Obtenga los datos relevantes para operar
let box = document.getElementById('box');
let arr = document.getElementById('arr');
let left = document.getElementById('left');
let right = document.getElementById('right');
let screen = box.querySelector('.screen');
let ul = screen.querySelector('ul');
let ol = screen.querySelector('ol');
let uLis = ul.children;
let oLis = querySelectorAll('li');Mover en evento: cuadro de evento onmouseover: mostrar div # arr
mover evento de fuera: cuadro de evento onmouseout: ocultar div # arr
box.onmouseover = function () {
arr.style.display = 'block';
};
box.onmouseout = function () {
arr.style.display = '';
};2: Haga clic en las flechas de la izquierda y derecha, a la izquierda, para ver la imagen anterior; a la derecha, para ver la siguiente imagen
Optimización, desplazamiento continuo.
Cuando cambie de la última imagen a la primera imagen, habrá una gran transición de espacio, use dos imágenes auxiliares para llenar este espacio.
Aquí hay un complemento para el desplazamiento continuo, mire directamente el código, copie la última imagen y colóquela antes de la primera imagen, y copie la primera imagen y colóquela detrás de la última imagen.
//拿到图片：第一个li和最后一个li（深克隆）
let first = uLis[0].cloneNode(true);
let last = uLis[uLis.length - 1].cloneNode(true);
//将第一张放到最后，最后一张放到最前
ul.insertBefore(last, uLis[0]);
ul.appendChild(first);Lo que el usuario debería ver es la primera imagen: mueva todo el ul 500 hacia la izquierda: screen.offsetWidth == 500
box.style.left = -screen.offsetWidth + 'px';
3. Definir una variable (global): se utiliza para registrar la posición de la imagen actual:
let index = 1;//1 此时代表是真正的第1张（也就是现在的第2张）
Encapsule una animación lenta como un efecto, que se puede invocar en cualquier momento en el futuro.
Cree un documento con un sufijo .js.
/**
* 缓速动画（向右移动）
* @param {element} ele ，要移动的元素
* @param {number} target，要移动的目标位置
*/
function animateSlow(ele, target) {
// 清理定时器：元素自己的定时器，自己保存
// ele.timeId 访问ele对象的timeId属性：没有得到的结果undefined
clearInterval(ele.timeId); // 有就清除，没有就什么都没做
// ele的移动：将当前元素自己的定时器存到自己的对象属性中
ele.timeId = setInterval(function () {
// 拿到ele的边距
let left = ele.offsetLeft;
// 计算步长
// 如果是向右移动：最终是1px移动：Math.ceil(小数) 得到1
// 如果是向左移动：最终是-1px移动：Math.ceil(-小数) 得到0
// let step = Math.ceil((target - left) * 0.1);
// 让step根据目标结果（可正可负）
let step = (target - left) * 0.1;
// 根据step的正负关系：求最小的1px
// step > 0 ：target（目标）比left（当前位置）大，向右移动：+1
// step < 0 ：target（目标）比left（当前位置）小，向左移动：-1
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 计算下一个位置
let next = left + step;
// console.log(left, step);
// 判定位置
if (next == target) {
// 下一步要到target：直接设定target
ele.style.left = target + 'px';
// 终止定时器：定时器存储在自己ele的属性中
clearInterval(ele.timeId);
// 结束当前函数
return;
}
// 正常移动
ele.style.left = next + 'px';
}, 20);
};Introducir animación js document
4. Haga clic en la operación de evento del botón izquierdo: mover ul, mover es el ancho correspondiente a la pantalla (li)
// left.onclick = funciton(){}; // 匿名回调
left.onclick = leftClick;
function leftClick() {
// 看前一张：下标-1即可
index--;
// 做动画：index变成了0，让ul移动：移动 -index * screen.offsetWidth
animateSlow(ul, -index * screen.offsetWidth);
}Después de seguir haciendo clic para ejecutar, encontrará que hay un espacio en blanco, y solo puede retroceder haciendo clic derecho
function leftClick() {
if (index == 0) {
//index--就表示前面一张图片，如果index已经等于0：说明当前的图片本质是看的最后一张（效果是第一张）：为了保证动画效果
// 让index瞬间变成倒数第二张：最后加了个第一张
index = uLis.length - 2;
// 让ul瞬间移动到倒数第二张
ul.style.left = -index * screen.offsetWidth + 'px';
}
// 看前一张：下标-1即可
index--;
// 做动画：index变成了0，让ul移动：移动 -index * screen.offsetWidth
animateSlow(ul, -index * screen.offsetWidth);
}
Lo mismo para la derecha, dejemos que ul se mueva hacia la izquierda
right.onclick = rightClick;
function rightClick() {
// 如果index已经是最后一张：本质代表的是有效第一张：瞬移到一张：index应该重置为1
if (index == uLis.length - 1) {
index = 1; // 回到第一张（此时看的是最后一张）
// 瞬移到第一张
ul.style.left = -screen.offsetWidth + 'px';
}
index++;
// 3. 动画效果
animateSlow(ul, -index * screen.offsetWidth);
Desempaquete los comentarios ocultos en el estilo css, y se hace el aspecto general. Puede hacer clic en izquierda y derecha para probar el efecto.
Luego, haga clic en los botones izquierdo y derecho para convertir el número de acuerdo con la imagen.
function leftClick() {
if (index == 0) {
// 要考虑index = 0，本身当前看到的是第5张，下一次要看第4张
oLis[index == 0 ? oLis.length - 1 : index - 1].classList.remove('current');//去除赋值给li下标的类名
index = uLis.length - 2;
ul.style.left = -index * screen.offsetWidth + 'px';
}
index--;
animateSlow(ul, -index * screen.offsetWidth);
oLis[index == 0 ? oLis.length - 1 : index - 1].classList.add('current');//赋值给已经自减li下标的类名
}derecho
right.onclick = rightClick;
function rightClick() {
oLis[index == uLis.length - 1 ? 0 : index - 1].classList.remove('current');
// 如果index已经是最后一张：本质代表的是有效第一张：瞬移到一张：index应该重置为1
if (index == uLis.length - 1) {
index = 1;
ul.style.left = -screen.offsetWidth + 'px';
}
index++;
animateSlow(ul, -index * screen.offsetWidth);
oLis[index == uLis.length - 1 ? 0 : index - 1].classList.add('current');Haga clic en el número de página para saltar directamente a la imagen correspondiente.
// 1. oLis里面的li的下标与 index之间的关系： oLis的下标 + 1 = index
oLis.forEach(function (item, key) {
//item代表元素,key代表下标
item.onclick = function () {
let oldOlisKey = index - 1;
if (index == 0) oldOlisKey = oLis.length - 1;
if (index == 6) oldOlisKey = 0;
//求出原来的页面的下标： 去除原来页码的样式
oLis[oldOlisKey].classList.remove('current');
//计算index当前的值： index = 当前页码下标 + 1
index = key + 1;
console.log(index)
//利用index动画效果实现
animateSlow(ul, -index * screen.offsetWidth);
//将当前页面对应的样式： 高亮显示
item.classList.animateSlow('current');La imagen del carrusel se moverá por sí sola y los temporizadores son indispensables. Los temporizadores tienen dos tipos: setTimeout (función de devolución de llamada, intervalo de tiempo) y setInterval (función de devolución de llamada, intervalo de tiempo). El primero se ejecuta una vez y el segundo es infinito.
Finalmente, el temporizador activa la dirección automática Carrusel derecho: let variable = setInterval (función de devolución de llamada, milisegundos);
escríbalo al principio de la página para obtener el elemento y agregarlo.
let timeId = setInterval(rightClick, 3000);Versión mejorada: cuando el mouse se mueve dentro del cuadro: borre el temporizador automático del carrusel.
Agregado al comienzo del cuadro de página mover a la función
clearInterval(timeId);Cuando el mouse se mueva fuera de la caja: continúe el carrusel y
agréguelo a la función de eliminación de caja al comienzo de la página
timeId = setInterval(rightClick, 3000);Resumen: Para comprender claramente el modo de reproducción de subíndices / imágenes, la cantidad de código no es demasiado, solo copie y pegue a la izquierda y a la derecha para modificarlo.
Por cierto, también se encapsula una animación, que tiene en cuenta el código, y puede modificarlo según sus propias necesidades. Puede dejar un mensaje si no comprende o no sugiere.