需要帮助以幻灯片方式显示数组项

Question

我的html / css和javascript的副本。 Stackoverflow希望我添加更多信息，但我认为标题是很容易解释的（听起来不像ad ** k）。 我想以幻灯片方式显示每个理发师的姓名及其社交媒体信息。 我希望理发师的姓名和信息每4秒更改一次。 我不仅想要答案，而且想知道自己做错了什么，所以以后不再重复此错误。 谢谢。 :)

function showinfo(){
    var barbername = ['Brian', 'Dwight', 'Greg','Josh','Tino'];
    var barberinfo = ['BarberPro','','Sunnti_TSN', '', 'ClipperDreams'];

    var bnameholder = document.getElementById('barbernamesm');
    var binfoholder = document.getElementById('barberinfosm');

    for (i = 0; i < barbername.length; i++){
        var currentname = barbername[i];
        var currentinfo = barberinfo[i];
    }

        bnameholder.innerText(currentname);
        binfoholder.innerText(currentinfo);

        setTimeout(showinfo, 4000);
    }

    showinfo();

Answer 1

有几个问题，但是主要的问题是-您需要为每个showInfo()调用增加i一次。

另外，不要使用两个数组，而要考虑一个包含对象的数组，这些对象包含每个理发师的名称和信息- [{ name: 'Brian', info: 'BarberPro' }, ...] 。

 var i = 0; // should be available to all runs of showinfo() var barbername = ['Brian', 'Dwight', 'Greg', 'Josh', 'Tino']; // declare once var barberinfo = ['BarberPro', '', 'Sunnti_TSN', '', 'ClipperDreams']; // declare once var bnameholder = document.getElementById('barbernamesm'); // get and cache once var binfoholder = document.getElementById('barberinfosm'); // get and cache once function showinfo() { var currentname = barbername[i]; var currentinfo = barberinfo[i]; bnameholder.innerText = currentname; // innerText is a property and not a function binfoholder.innerText = currentinfo; // innerText is a property and not a function i = (i + 1) % barbername.length; // increment i in cycle of 0-3 setTimeout(showinfo, 1000); } showinfo(); 

 <div id="barbernamesm"></div> <div id="barberinfosm"></div>