<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片效果</title>
<style>
.ceimg {
display: flex;
height: 260px;
align-items: center;
position: relative;
}
.ceimg>img {
margin-right: 14px;
width: 130px;
height: 180px;
}
/*
::-webkit-scrollbar去除滚动条
*/
.ceimg::-webkit-scrollbar {
display: none;
}
.choice {
border: 3px solid red;
box-shadow: 0px 2px 2px black;
}
div>span {
position: absolute;
top: 45%;
background-color: rebeccapurple;
cursor: pointer;
}
span:nth-child(1) {
left: 0px;
z-index: 1;
}
span:nth-child(2) {
z-index: 1;
right: 0;
}
</style>
</head>
<body>
<div>
</div>
<script>
let divel = document.querySelector('div');
let dataArr = [
{ name: '../img/1.jpg' },
{ name: '../img/2.jpg' },
{ name: '../img/3.jpg' },
{ name: '../img/5.jpg' },
{ name: '../img/6.jpg' },
{ name: '../img/7.jpg' },
{ name: '../img/8.jpg' },
{ name: '../img/9.jpg' },
{ name: '../img/10.jpg' },
{ name: '../img/11.jpg' },
];
divel.style.width = 1200 + "px";
divel.style.height = 260 + "px";
divel.style.backgroundColor = "#eee";
divel.style.margin = "auto";
divel.style.overflow="hidden";
divel.style.position = "relative";
function rend() {
let str = "";
str += `
<span data-index="-""><</span>
<span data-index="+">></span>`;
str += `
<div class="ceimg">`;
for (let index in dataArr) {
str += `
<img src="${dataArr[index].name}" alt="" data-inde="${index}">
`;
}
str += `
</div >`;
divel.innerHTML = str;
let imge = document.querySelector(".ceimg>img");
imge.setAttribute("class", "choice");
}
rend();
let imgele = document.querySelectorAll(".ceimg>img");
console.log(imgele);
let indeximg = 0;
divel.addEventListener("click", dianji);
function dianji(e) {
let event = e || window.event;
//点击图片添加边框
if (event.target.localName == "img") {
[...imgele].map(item => item.className = " ");
indeximg = event.target.dataset.inde;
console.log(indeximg);
// console.log(indeximg); 拿到图片下标
event.target.setAttribute("class", "choice");
// imgele[indeximg].style.transform = "scale(1.02)";
}
//判断是否点击到第一张图片(即不会再往前展示)
if (event.target.dataset.index == "+") {
[...imgele].map(item => item.className = " ");
if (indeximg == imgele.length - 1) {
indeximg = imgele.length - 1;
}
else {
indeximg++;
}
imgele[indeximg].setAttribute("class", "choice");
}
//判断是否点击到第一张图片(即不会再往前展示)
if (event.target.dataset.index == "-") {
[...imgele].map(item => item.className = " ");
if (indeximg == 0) {
indeximg = 0;
}
else {
indeximg--;
}
imgele[indeximg].setAttribute("class", "choice");
}
let divEle = document.querySelector("div>.ceimg");
console.log(divEle);
if (indeximg == 8) {
divEle.style.left = -(8 * ([...imgele][0].clientWidth) +100) + "px";
}
if (indeximg == 7) {
let divEle = document.querySelector("div>.ceimg");
divEle.style.left = 0 + "px";
}
}
</script>
</body>
</html>
图1
图2
图3
上面是3张图片样式 当打开页面 显示图1 点击右按钮 图片加 当到达图一最后一张图片时候 再点击会到达图3 当再点击加按钮又会到图3 。