这轮播图,右按钮图片移动是往左的,为何左按钮图片移动也是往左?不应该往右吗?

这轮播图,右按钮图片移动是往左的,为何左按钮图片移动也是往左?不应该往右吗?

 // 右边按钮监听

        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';

            }


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕言 2021-01-22 19:37:07

同学你好,图片在一行显示,第一张图片的left值为0,点击右按钮,整体往左移动,left值应该是负值。

如果此时显示的是最后一张,left值应该为-2600px,点击左按钮,整体往右移动(显示倒数第二张图片),此时left值应该是-1950px(因为一张图片的宽度为650px),再点击左按钮,整体再往右移动(显示倒数第三张图片),left值应该是-1300px,依次类推,如果要显示第一张,left值应该为0.

一共是5张图片,点击左右按钮,left值会一直在0到-2600px之间。

同学可以再理解一下,祝学习愉快~

wt涛 提问者 2021-01-22 18:03:48

不是,我是想问这节教学视频里不是有左按键和右按键,按右按键我能理解图片向右移动,按左按键不应该是往左移动?为何都是-idx*650?

好帮手慕言 2021-01-22 17:22:29

同学你好,使用同学提供的部分代码,放到源码中测试,点击右按钮,图片往左运动,点击左按钮,图片往右移动,和同学所说的不符,建议:可以把完整的代码都粘贴上来(html,css,js都粘贴上来),老师帮助排查,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

登录后可查看更多问答,登录/注册

请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师