一、 思路：使用定时器完成图片的位置的偏移，使用transition完成图片的过渡动画。
上图解释： 单个黄色矩形表示图片，包裹所有矩形的外层这里叫“盒子”，蓝色盖住的部分代表可视盒子。
1.自动轮播
效果图：
实现思路：
上图黄色方块代表轮播图的排列位置，默认图片从start开始，切换到end的时候再往后走一个图片的宽度，到达chang的位置。此时通过js把盒子的transition过渡属性的时间置为0s，然后让盒子的位置切换到start的位置（此时看不到过度动画），再通过js把盒子的过渡属性置为n秒（n为滚动时间），继续自动切换，此为一个循环。
2.左点击无缝切换
效果图:
实现思路：
当点击“左”按钮时，将盒子的偏移量减去一张图片的距离，盒子则向左偏移，当盒子的位置到达change位置的时候，清除定时器，把盒子的transition置为0s,把盒子的位置切换到start(因为change和start的图片是一样的，并且没有动画，所以看来就是没有切换)， 然后设置等待n秒后继续自动滚动。此为一个完整的循环。
3.右点击无缝切换
效果图：
实现思路：
当点击“右”按钮时，将盒子的偏移量加一张图片的宽度，盒子则向右偏移，当盒子位置到达start前一张图片的位置时，清除定时器，把盒子的过渡的时间置为0s, 把盒子的位置设置到end的位置， 然后设置等待n秒继续自动滚动，此为一个循环。
二、代码实现
1.HTML代码
<body>
<div class="outer">
<!-- 切换按钮 -->
<span class="left">左</span>
<span class="right">右</span>
<ul class="inner">
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
</ul>
<!-- 小圆点 -->
<div class="ctrlCircle">
<span class="on" index="1"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
</div>
</body>2.CSS代码
<style>
*{
margin: 0;
padding: 0;
}
.outer{
position: relative;
margin: 100px auto;
width: 400px;
height: 150px;
overflow: hidden;
}
.on{
background-color: #bfa!important;
}
.inner{
position: relative;
/* 此处输入一张图片宽度的负值(起始位置)*/
left: -400px;
/* 总宽度 = 图片个数 * 一张图片宽度 */
width: 2800px;
height: 150px;
}
li{
font-size: 50px;
text-align: center;
list-style: none;
/* 图片盒子宽度 */
width: 400px;
height: 100px;
height: 100%;
line-height: 150px;
float: left;
}
.ctrlCircle{
position: absolute;
bottom: 10px;
left: 160px;
}
.ctrlCircle span{
cursor: pointer;
border-radius: 50%;
margin-right: 5px;
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
.left{
cursor: pointer;
z-index: 2;
position: absolute;
top: 71px;
left: 10px;
}
.right{
cursor: pointer;
z-index: 2;
position: absolute;
top: 71px;
right: 10px;
}
.inner li:nth-child(1){
background-color: pink;
}
.inner li:nth-child(2){
background-color: yellow;
}
.inner li:nth-child(3){
background-color: skyblue;
}
.inner li:nth-child(4){
background-color: green;
}
.inner li:nth-child(5){
background-color: yellow;
}
.inner li:nth-child(6){
background-color: pink;
}
.inner li:nth-child(7){
background-color: yellow;
}
</style>3.JS代码
//包裹图片的盒子
const inner = document.querySelector(".inner")
//左边切换按钮
const left = document.querySelector(".left")
//右边切换按钮
const right = document.querySelector(".right")
//所有圆点
const ctrlCircle = document.querySelectorAll(".ctrlCircle span")
//原点的盒子(用来添加点击事件)
const circleContaniner = document.querySelector(".ctrlCircle")
//图片宽度
var imgWidth = 400
//此处输入一张图片的负值代表滚动到的位置
var initLeft = -imgWidth
//图片总数量
var sumImg = 5
//滚动一张图片的间隔
var steptTime = 2000
//自动滚动定时器
var Scrolltimer
//初始过渡动画
inner.style.transition = "1s"
//当前小圆点
var thisCircle = 0
//操作后重新启动定时器的时间
var clickAfterTime = 3000
//滚动函数
var autoScroll = () => {
for (let i = 0; i < ctrlCircle.length; i++) {
ctrlCircle[i].className = "null"
}
thisCircle = -(initLeft / imgWidth)
// if ()
if (thisCircle >= 5) thisCircle = 4
ctrlCircle[thisCircle].className = "on"
initLeft -= imgWidth
if (initLeft < (sumImg) * -imgWidth) {
//迅速切换到第一张图片并把动画置为0s
initLeft = 0
inner.style.transition = "0s"
//此定时器用来控制切换完图片后重新加上过度动画
var animaAgain = setTimeout(() => {
inner.style.transition = "1s"
Scrolltimer = setInterval(autoScroll, steptTime)
}, 50)
clearInterval(Scrolltimer)
}
inner.style.left = initLeft + "px"
}
Scrolltimer = setInterval(autoScroll, steptTime)
//左切换
left.onclick = (e) => {
clearInterval(Scrolltimer)
for (let i = 0; i < ctrlCircle.length; i++) {
ctrlCircle[i].className = "null"
}
//底下圆点跟随
thisCircle = -(initLeft / imgWidth)
if (thisCircle >= 5) thisCircle = 0
ctrlCircle[thisCircle].className = "on"
if (initLeft < (sumImg) * -imgWidth) {
initLeft = 0
inner.style.transition = "0s"
} else {
inner.style.transition = "1s"
}
initLeft = ((initLeft / imgWidth) - 1) * imgWidth
console.log(initLeft);
inner.style.left = initLeft + "px"
// 等待n秒重新启动自动滚动
var timerClickAfterScroll = setTimeout(() => {
clearInterval(Scrolltimer)
inner.style.transition = "1s"
Scrolltimer = setInterval(autoScroll, steptTime)
}, clickAfterTime)
}
//右切换
right.onclick = () => {
clearInterval(Scrolltimer)
initLeft = ((initLeft / imgWidth) + 1) * imgWidth
if (initLeft > 0) {
initLeft = -(imgWidth * (sumImg))
inner.style.transition = "0s"
} else {
inner.style.transition = "1s"
}
inner.style.left = initLeft + "px"
for (let i = 0; i < ctrlCircle.length; i++) {
ctrlCircle[i].className = "null"
}
//底下圆点跟随
thisCircle = -(initLeft / imgWidth) - 1
if (thisCircle >= 5) thisCircle = 0
if (thisCircle <= -1) thisCircle = 4
ctrlCircle[thisCircle].className = "on"
// 等待n秒重新启动自动滚动
var timerClickAfterScroll = setTimeout(() => {
clearInterval(Scrolltimer)
if (initLeft == -(sumImg + 1) * imgWidth) {
initLeft = 0
inner.style.transition = "1s"
}
Scrolltimer = setInterval(autoScroll, steptTime)
}, clickAfterTime)
}
circleContaniner.onclick = (e) => {
//事件冒泡判断是否点击的是原点按钮
if (e.target.tagName == "SPAN") {
//清除定时器
clearInterval(Scrolltimer)
//拿到点击的index并且切换图片
initLeft = e.target.getAttribute("index") * -imgWidth
inner.style.left = initLeft + "px"
for (let i = 0; i < ctrlCircle.length; i++) {
ctrlCircle[i].className = "null"
}
//底下圆点跟随
thisCircle = -(initLeft / imgWidth) - 1
if (thisCircle >= 5) thisCircle = 0
ctrlCircle[thisCircle].className = "on"
//n秒以后重新启动定时器
var timerClickAfterScroll = setTimeout(() => {
clearInterval(Scrolltimer)
Scrolltimer = setInterval(autoScroll, steptTime)
}, clickAfterTime)
}
}