老师为什么我按在其他同学提问中老师的回答写的代码总是第一次按方向键时会跳过一张图片?

来源:3-1 键盘事件(上)

Aurora_Meteor

2020-03-22 20:29:48

$(document).ready(function () {

    $('a').click(function () {

        $('img').eq($(this).index()).css({

            'opacity': '1'

        }).siblings().css({

            'opacity': '0'

        });

    });

    var alinks = $('a');

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

        // alinks[i].style.backgroundColor = 'red';

        // alinks[i].style.color = '#fff';

        alinks.eq(i).css({

            backgroundColor: 'red',

            color: '#fff'

        });

    }


    var index = 0;

    $(document).keydown(function (e) {

        var swiper = function () {

            $('img').eq(index).css({

                'opacity': '1'

            }).siblings().css({

                'opacity': '0'

            });

        }

        if (e.keyCode == 37 || e.keyCode == 38) {

            index = index > 0 ? --index : $('a').length - 1;//当前图片是否不是第一张,不是的话索引值-1,是的话索引值变为最后一张图片的索引值

        } else if (e.keyCode == 40 || e.keyCode == 39) {

            index = index < $('a').length - 1 ? ++index : 0; //当前图片是否不是最后一张,不是的话索引值+1,是的话索引值变为第一张图片的索引值0

        }

        swiper();

    });

});

第一次按上、左方向键时,会直接显示当前图片的前面第二张,之后再按就挨着显示;第一次按右、下方向键时,会直接显示当前图片的后面第二张,之后再按就挨着显示。这是为什么?

写回答

2回答

好帮手慕糖

2020-03-23

同学你好,因为默认的index是0,应该对应的第一张图片,但是这里显示的不是第一张图片,是最后一张,但是所有是第一张,所有点击下一张的时候,索引是1,对应第二张图片,直接从倒数第一张图片到了第二张图片。将第一张跳过了。

建议:可以将swiper这个函数,在外面封装,然后在定义索引之后,先调用一遍这个函数,让其显示第一张图片。例:

http://img.mukewang.com/climg/5e7855a109525afd05050613.jpg

祝学习愉快~

0

好帮手慕糖

2020-03-23

同学你好,同学是要实现什么效果?建议:详细的描述下,且因代码不完整,无法进行测试,建议:可以提供下完整的代码,也可以说明下是参考的哪个问答哦,便于准确的定位与解决问题。

祝学习愉快~

0
hurora_Meteor
h 就是实现按方向左键和上键图片向左切换,按右键和下键图片向右切换
h020-03-23
共3条回复

0 学习 · 14456 问题

查看课程