（1）布局
<div id="rotation">
<ol id="dot">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<ul id="rotateFather">
<li><img src="./jQuery.无缝滑动轮播图封装/imgs/4.png" alt=""></li>
<li><img src="./jQuery.无缝滑动轮播图封装/imgs/1.png" alt=""></li>
<li><img src="./jQuery.无缝滑动轮播图封装/imgs/2.png" alt=""></li>
<li><img src="./jQuery.无缝滑动轮播图封装/imgs/3.png" alt=""></li>
<li><img src="./jQuery.无缝滑动轮播图封装/imgs/4.png" alt=""></li>
<li><img src="./jQuery.无缝滑动轮播图封装/imgs/1.png" alt=""></li>
</ul>
<button class="leftBtn"><</button>
<button class="rightBtn" οnclick="">></button>
css部分：
* {
padding: 0;
margin: 0;
}
div {
margin: auto;
position: relative;
width: 600px;
height: 450px;
overflow: hidden;
}
ul {
width: 4800px;
height: 450px;
position: absolute;
left: -600px;
}
li {
float: left;
width: 600px;
height: 450px;
}
button {
width: 30px;
height: 60px;
}
button:nth-of-type(2) {
position: absolute;
top: 220px;
left: 560px;
}
button:nth-of-type(1) {
position: absolute;
top: 200px;
}
ol {
position: absolute;
top: 350px;
left: 250px;
z-index: 2;
}
ol li {
float: left;
margin-right: 10px;
list-style: none;
width: 25px;
height: 25px;
background-color: black;
border-radius: 25px;
color: white;
text-align: center;
line-height: 25px;
transform: translateX();
transition: all .5s linear;
}
（2）js部分：
var rotation = document.getElementById("rotation")
var rotateFather = document.getElementById("rotateFather");
var lis = rotateFather.children;
var oli = document.getElementById("dot").children;
var div = document.getElementById("rotation");
var rightBtn = document.getElementsByClassName("rightBtn")[0];
var leftBtn = document.getElementsByClassName("leftBtn")[0];
var index = 0;
var n = 0;
oli[index].style.backgroundColor = "red"//第一个小li颜色
function clearColor() { //clearColor函数清除小li的颜色
for (let i = 0; i < oli.length; i++) {
oli[index].style.backgroundColor = null
}
}
rightBtn.onclick = function () {//右边点击
clearColor()
index++
if (index > 3) {
index = 0
}
oli[index].style.backgroundColor = "red"
n++
rotateFather.style.transform = `translateX(${n * -600}px)`
rotateFather.style.transition = `all .5s linear`
setTimeout(() => { //定时器是最后一张时，和transition时间对应
if (n == 4) {
n = 0
rotateFather.style.transform = `translateX(0px)`
rotateFather.style.transition = `all 0s linear`
}
}, 500)
}
leftBtn.onclick = function () { //左边点击
clearColor()
index--
if (index < 0) {
index = 3
}
oli[index].style.backgroundColor = "red"
n--
rotateFather.style.transform = `translateX(${n * -600}px)`
rotateFather.style.transition = `all .5s linear`
setTimeout(() => {
if (n == -1) {
n = 3
rotateFather.style.transform = `translateX(${n * -600}px)`
rotateFather.style.transition = `all 0s linear`
}
}, 500)
}
let timer = setInterval(function () { //右边点击放定时器里面,每1000点击一次
rightBtn.click()
}, 1000)
rotation.onmouseenter = function () {//进入轮播停止定时器
clearInterval(timer)
}
rotation.onmouseleave = function () {//离开轮播开启定时器
timer = setInterval(function () {
rightBtn.click()
}, 1000)
}
for (let i = 0; i < oli.length; i++) {//移动下面的小li,显示对应的图片和对应的小li变色
oli[i].onmouseenter = function () {
clearColor()
index = i
oli[index].style.backgroundColor = "red"
n = index
rotateFather.style.transform = `translateX(${n * -600}px)`
rotateFather.style.transition = `all .5s linear`
setTimeout(() => {
if (n == 4) {
n = 0
rotateFather.style.transform = `translateX(0px)`
rotateFather.style.transition = `all 0s linear`
}
}, 500)
}
}
