The directory structure

The HTML code

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, > <title>Document</title> <link href="./index.css" rel="stylesheet"> </head> <body> <div class="wrap"> <! - put pictures in a box set relative positioning - > < div class = "imgList" > < img SRC = ". / img / 1. JPG "Alt =" "> < img SRC =". / img / 2. JPG "Alt =" "> < img src="./img/3.jpg" alt=""> </div> <! - the thumbnail -- > < div class = "smallImg" > < img SRC = ". / img / 1. JPG "Alt =" "> < img SRC =". / img / 2. JPG "Alt =" "> < img SRC =". / img / 3. JPG" alt=""> </div> <! - left and right buttons - > < div class = "fx" > < div class = "left" > < < / div > < div class = "right" > > < / div > < / div > < / body > < / HTML > < script src="./index.js"></script>Copy the code

CSS code

padding: 0; margin: 0; } .wrap { overflow: hidden; width: 1000px; position: relative; margin: 0 auto; } .imgList { display: flex; position: relative; left: 0; The transition: 0.5 s ease; } .imgList img { width: 1000px; height: 100%; } .smallImg { position: absolute; top: 80%; left: 30%; } .smallImg img { width: 100px; height: 100%; filter: brightness(120%); } .smallImg img:first-child{ filter: grayscale(90%); } .fx{ width: 1000px; display: flex; justify-content: space-between; position: absolute; top: 40%; } .left, .right{ width: 50px; height: 70px; line-height: 70px; background-color: rgba(0, 0, 0,.5); text-align: center; color: white; }Copy the code

Js code

let rightBtn = document.querySelector('.right') let imgList = document.querySelector('.imgList') let index = 0 // Clone first placed the last picture Realize the seamless connection let cloneImg = imgList. FirstElementChild. CloneNode () imgList. The appendChild (cloneImg) / / right button Rightbtn.onclick = function () {Rbtn()} // leftbtn.onclick = function () {if (index === 0) {index = 3 Imglist.style. transition = 'none' imglist.style. left = index * -1000 + 'px' // Set timer to 0 then setTimeout(() =>  { index-- imgList.style.transition = '.5s ease' imgList.style.left = index * -1000 + 'px' lvj(index) }, 0); } else {index-- LVJ (index) imglist.style. left = index * -1000 + 'px'} document.querySelectorAll('.smallImg img') for (let i = 0; i < smallImg.length; i++) { smallImg[i].onclick = function () { index = i imgList.style.transition = '.5s ease' imgList.style.left = index * Function Rbtn () {index++ // If (index === 3) {if (index == 3) {if (index == 3) { Imlist.style. left = index * -1000 + 'px' LVJ (index) setTimeout(() => {  index = 0 imgList.style.transition = 'none' imgList.style.left = index * -1000 + 'px' }, 500); } imglist.style.transition = '.5s ease' imglist.style. left = index * -1000 + 'px' LVJ (index) (index) { if (index === 3) index = 0 for (let i = 0; i < smallImg.length; i++) { smallImg[i].style.filter = 'brightness(120%)' } smallImg[index].style.filter = 'grayscale(90%)' } setInterval(Rbtn, 1000);Copy the code