不用封装动画函数的方法实现无缝轮播图

学习轮播图的时候

刚开始实现的轮播图是有CSS过渡属性的    12345   即从5到1的话会有一个闪回的过程  并不是无缝轮播图

然后无缝轮播图的话  需要 5到1仍然有视觉上的动画效果    即123451  5到1 动画效果结束之后  立马从最后的1换到第一个1

大家应该都是采用封装一个动画函数     判断到了最后一个1的话  就让其的left归0  由于123451的过程是使用动画函数（即盒子的每步移动距离慢慢变小直到目标距离）   并不是给ul添加transition属性  所以就能够实现123451拥有动画效果   5到1动画效果结束之后   从最后一个1瞬间换到第一个1的功能  

那我就想   有没有不采用封装函数的方法来实现无缝轮播图呢？(我知道能用封装动画函数来写)

我本以为很简单就能实现，毕竟原理很简单嘛  123451   当到最后一个1的时候   取消ul的过渡属性  然后将其left归0   

但实际上手却发现问题很多   因为你必须等到 5→1这个过程完了之后才能把过渡属性取消   然后最后一个1到第一个1  然后再把过渡属性加回去  这就会产生很多问题了

最后采用了设置一个定时器    等到过渡的时间结束之后  再进行left归0的操作

这是点击右按钮的效果

nextbtn.onclick = function() {

        if (flag) {

            flag = false;

            ullunbo.style.transitionProperty = "all";

            index++;

            count++;

            ullunbo.style.left = -index * w + 'px';

            setTimeout(function() {

                flag = true;

            }, 1000)

            if (index == ullunbo.children.length - 1) {

                setTimeout(function() {

                    index = 0;

                    ullunbo.style.transitionProperty = "none";

                    ullunbo.style.left = -index * w + 'px';

                }, 1000)

            }

            for (i = 0; i < li.length; i++) {

                li[i].classList.remove('current');

            }

            if (index < 8) {

                li[index].classList.add('current');

            } else {

                li[0].classList.add('current');

            }

        }

    }

 

本以为这样就结束了   结果左按钮比右按钮要麻烦一点  因为你要先取消过渡把它从第一个1瞬间变到最后一个1  再进行添加过渡

活用定时器解决

previousebtn.onclick = function() {

        if (flag) {

            flag = false;

            index--;

            count--;

            ullunbo.style.transitionProperty = "all";

            if (index < 0) {

                ullunbo.style.transitionProperty = "none";

                index = ullunbo.children.length - 1;

                ullunbo.style.left = -index * w + 'px';

                setTimeout(function() {

                    ullunbo.style.transitionProperty = "all";

                    index = ullunbo.children.length - 2;

                    ullunbo.style.left = -index * w + 'px';

                }, 0)

            }

            ullunbo.style.left = -index * w + 'px';

            setTimeout(function() {

                flag = true;

            }, 1000)

        }

        for (i = 0; i < li.length; i++) {

            li[i].classList.remove('current');

        }

        if (index < 8) {

            li[index].classList.add('current');

        } else {

            li[li.length - 1].classList.add('current');

        }

    }

 

我只是个JS菜鸟  个人感觉应该有更简单的方法实现（不使用封装动画函数） 我回头也会再去试试其他方法

如果有大佬知道简便方法的话   希望指出