老师帮忙看下,感觉有点不对劲呢

老师帮忙看下,感觉有点不对劲呢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏的云南旅游相册</title>
    <link rel="stylesheet" href="css/css.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <span></span>
    <nav>
        <a href="#">泸沽湖</a>
        <a href="#">丽江古城</a>
        <a href="#">茶马古道</a>
        <a href="#">就这家·云逸客栈</a>
        <a href="#">西双版纳</a>
        <a href="#">云南红酒庄</a>
        <a href="#">轿子雪山</a>
        <a href="#">普者黑</a>
        <a href="#">海埂大坝</a>
        <a href="#">玉龙湾</a>
        <a href="#">昆明郊野公园</a>
        <a href="#">欧洲风琴小镇</a>
    </nav>
    <div>
        <img src="images/1.jpg">
        <img src="images/2.jpg">
        <img src="images/3.jpg">
        <img src="images/4.jpg">
        <img src="images/5.jpg">
        <img src="images/6.jpg">
        <img src="images/7.jpg">
        <img src="images/8.jpg">
        <img src="images/9.jpg">
        <img src="images/10.jpg">
        <img src="images/11.jpg">
        <img src="images/12.jpg">
    </div>
</body>
</html>
$(document).ready(function(){
    var index = 0;
    var swiper = function(){
        $('img')
        .eq(index)
        .css({'opacity':'1'})
        .siblings()
        .css({'opacity':'0'})};
    // $('a').click(function(){
    //     $('img')
    //     .eq($(this)
    //     .index())
    //     .css({'opacity':'1'})
    //     .siblings()
    //     .css({'opacity':'0'});
    // });
    $(document).keydown(function(event){
        if(event.keyCode == 37){
            if(index == 0){
                index = $('a').length - 1;
            }else{
                index --;
            }
            swiper();
        }else if(event.keyCode == 39){
            if(index == $('a').lenght - 1){
                index = 0;
            }else{
                index ++;
            }
        }swiper();
    })
});


正在回答

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

2回答

同学你好,可以参考下方:

1、打开页面时,显示的是最后一张图片,index的初始值为0,按左键时,符合index == 0的条件,index就等于$('a').length - 1,显示的是最后一张,也就是说最后一张显示了两次,在视觉上感觉没有变化,因此按两次图片才会发生变化。建议:可以先调用下swiper,默认显示索引为0的图片。如下:

http://img1.sycdn.imooc.com//climg/5eed6858098e566705280461.jpg

2、按右键按了几次图片就不会改变了,原因是单词写错了,可以参考下方:

http://img1.sycdn.imooc.com//climg/5eed68d90963ab2806240139.jpg

祝学习愉快~

好帮手慕言 2020-06-19 17:00:38

同学你好 ,提到的不对劲是指哪里呢?建议详细描述下。祝学习愉快~

  • 提问者 宝慕林3013065 #1
    按左键的时候一开始需要按两下,按右键的时候按了几下之后就不变了
    2020-06-19 19:11:54
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

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

在线咨询

领取优惠

免费试听

领取大纲

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