// 右边按钮监听

        rightbtn.onclick = function () {

            // 判断锁的状态

            if (!lock) return; 

            lock = false;

            // 给list加过渡，为什么要加？？css中不是已经加了么？？这是因为最后一张图片会把过渡去掉

            list.style.transition = 'left .5s ease 0s';

            idx ++;

            if (idx > 4) {

                // 设置一个延时器，延时器的功能就是将ul瞬间拉回0的位置，延时器的目的就是让过渡动画结束之后

                setTimeout(function() {

                    // 取消掉过渡，因为要的是瞬间移动，不是“咕噜”回去

                    list.style.transition = 'none';

                    list.style.left = 0;

                    idx = 0;

                }, 500);

            }

            list.style.left = -idx * 650 + 'px';

​

  // 左边按钮监听

        leftbtn.onclick = function () {

            if (!lock) return;

            lock = false;

            // 判断是不是第0张，如果是，就要瞬间用假的替换真的

            if (idx == 0) {

                // 取消掉过渡，因为要的是瞬间移动，不是“咕噜”过去

                list.style.transition = 'none';

                // 直接瞬间移动到最后的假图片上

                list.style.left = -5 * 650 + 'px';

                // 设置一个延时器，这个延时器的延时时间可以是0毫秒，虽然是0毫秒，但是可以让我们过渡先是瞬间取消，然后再加上

                setTimeout(function() {

                    // 加过渡

                    list.style.transition = 'left .5s ease 0s';

                    // idx改为真正的最后一张

                    idx = 4;

                    list.style.left = -idx * 650 + 'px';

                }, 0);

            } else {

                idx --;

                list.style.left = -idx * 650 + 'px';

            }