Df.717 2024-04-08 08:10 采纳率: 28.6%
浏览 3

关于#javascript#的问题:下标

在这一串代码中,假设var n=0;当n=0时,是1.jpg还是5.jpg?

<body>
        
        <div id="banner">
            <div id="pic">
                <ul>
                    <li><img src="img/5.jpg" alt="" /></li>
                    <li><img src="img/1.jpg" alt="" /></li>
                    <li><img src="img/2.jpg" alt="" /></li>
                    <li><img src="img/3.jpg" alt="" /></li>
                    <li><img src="img/4.jpg" alt="" /></li>
                    <li><img src="img/5.jpg" alt="" /></li>
                    <li><img src="img/1.jpg" alt="" /></li>
                </ul>
            </div>

            <div id="btn">
                <div id="left">&lt;</div>
                <div id="right">&gt;</div>
            </div>

            <div id="tab">
                <ul>
                    <li class='on'></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
<script type="text/javascript" src='move.js'></script>
        <script type="text/javascript">
            (function(){
                var tabLi = document.getElementById('tab').getElementsByTagName('li');
                var oUl = document.getElementById('pic').getElementsByTagName('ul')[0];
                var oRight = document.getElementById('right');
                var oLeft = document.getElementById('left');
                var oBanner = document.getElementById('banner');
                var ligoudaner = 0;
                var timer;
                var nowTime = 0;

                for ( var i=0;i<tabLi.length;i++ )
                {
                    tabLi[i].wangdachui = i;
                    tabLi[i].onclick = function(){
                        tabLi[ligoudaner].className = ''; // 前一个变到没有
                        ligoudaner = this.wangdachui;
                        change();
                    };
                };

                oRight.onclick = function(){
                    if ( new Date() - nowTime > 300 )
                    {
                        nowTime = new Date();
                        tabLi[ligoudaner].className = '';
                        ligoudaner ++;
                        ligoudaner %= tabLi.length+1;
                        change();
                    }
                    
                };

                oLeft.onclick = function(){
                    if ( new Date() - nowTime > 300 )
                    {
                        nowTime = new Date();
                        tabLi[ligoudaner].className = '';
                        ligoudaner = ligoudaner<0?tabLi.length-1:ligoudaner-1;
                        change();
                    };
                };
                
                auto();
                
                oBanner.onmouseenter = function(){
                    clearInterval( timer );
                };

                oBanner.onmouseleave = function(){
                    auto();
                };

                function auto(){
                    timer = setInterval(function(){
                        tabLi[ligoudaner].className = '';
                        ligoudaner ++;
                        ligoudaner %= tabLi.length+1;
                        change();
                    },3000);
                };

                function change(){
                    var now = ligoudaner;
                    now %= tabLi.length;
                    if ( now < 0 )now = tabLi.length - 1;
                    tabLi[now].className = 'on'; // 当前这个加上on
                    move( oUl , {marginLeft : -520*(ligoudaner+1) + 'px'} , 300 , function(){
                        if ( ligoudaner == tabLi.length )
                        {
                            this.style.marginLeft = '-520px';
                            ligoudaner = now;
                        }
                        else if (ligoudaner == -1)
                        {
                            this.style.marginLeft = -520*tabLi.length + 'px';
                            ligoudaner = now;
                        }
                    });
                };
            })();

  • 写回答

5条回答 默认 最新

  • 檀越@新空间 2024-04-08 08:10
    关注

    上午好☀️☀️☀️️
    本答案参考ChatGPT-3.5

    当n=0时,是5.jpg。是因为在代码中第一个li标签中的img标签便是5.jpg,而Javascript中的下标是从0开始的,因此要取第一个元素应该使用下标0。

    解决方案:

    1. 通过Javascript获取img元素所在的li标签,并获取其下标;
    2. 判断下标是否为0,若是则为5.jpg。

    代码修改如下:

    <body>
    <div id="btn">
        <div id="left">&lt;</div>
        <div id="right">&gt;</div>
    </div>
    
    <div id="tab">
        <ul>
            <li class='on'></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    
    <script></script> </body>
    评论 编辑记录

报告相同问题?

问题事件

  • 修改了问题 4月8日
  • 创建了问题 4月8日