html css js实现无缝轮播图思路及其实现

一、 思路：使用定时器完成图片的位置的偏移，使用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代码

    

        
        左
        右
        

            
5
            
1
            
2
            
3
            
4
            
5
            
1

        
        
        

            
            
            
            
            

        
    

2.CSS代码

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)
    }
}