想问一下百度换一换功能怎么实现

Question

类似于百度首页点击换一换可以反复切换内容
以下是我的js代码
var moren = ["你好2013","你好2014"];
var mm = document.getElementById("neirong");
var nn = mm.children;
var y = 0;
var temp = 0;

for(var i = 0;i < nn.length;i++)
    {
        nn[i].innerHTML = moren[y];
        y = y + 1;
    }

function huanyihuan(){
    temp = temp + 1 ;
    console.log(temp);
   

    if(temp % 2 ==1 )
    {
        console.log("偶数");
        var moren2 = ["你好2015","你好2017"]；
        var mm = document.getElementById("neirong");
        var nn = mm.children;
        var y = 0;
        for(var i = 0 ; i < nn.length;i++)
        {
            nn[i].innerHTML = moren2[y];
            y = y + 1;
        }
    }
    else
    {
        console.log("奇数");
        var moren1 = ["你好2016","你好2018"]；
        var mm = document.getElementById("neirong");
        var nn = mm.children;
        var y = 0;
        for(var i = 0 ; i < nn.length;i++)
        {
            nn[i].innerHTML = moren1[y];
            y = y + 1;
        }
    }
}

希望将完整的html代码帮忙补一下

Answer 1

<a onclick="changePage()">换一换</a>
<style>
    .hide{display:none}
</style>
<ul id="ul">
    <script>
        var moren = ["你好2013", "你好2014", "你好2015", "你好2016", "你好2017", "你好2018", "你好2019", "你好2020", "你好2021", "你好2022"];
        var curpage = 1,//定义当前页，默认第一页
            pageSize = 4//每页显示的数据记录，显示都少条改这个变量值即可
            ;
        /*
         //这个循环测试用，输出1~30的数字重复20次的数据
        for (var i = 1; i <= 30; i++) {
            document.write(`<li class="${i > pageSize?'hide':''}">${i.toString().repeat(20).substr(0,20)}</li>`)
        }
        */


        //这的for是从moren数组中获取li的内容，和上面基本一致，只是一个是直接用遍历的i作为内容，一个是从数组中遍历得到内容
        //同时判断如果i大于等于页码大小，后续的内容添加样式hide隐藏起来
        for (var i = 0; i < moren.length; i++) document.write(`<li class="${i >= pageSize ? 'hide' : ''}">${moren[i]}</li>`)//document.write输出li和尼尔到ul中，同时判断


        var lis = ul.querySelectorAll('li'),//获取ul容器下的li对象集合，就是上面document.write输出的
            total = lis.length,//li的数量
            totalpage = Math.floor(total / pageSize) + (total % pageSize == 0 ? 0 : 1);//计算分页数量

        function changePage() {//换一换事件处理
            curpage += 1;//+1切换到一下页
            if (curpage > totalpage) curpage = 1;//如果当前页大于总页数，则赋值为1，从第一页开始切换
            var start = (curpage - 1) * pageSize;//显示的li的开始下标
            var end = start + pageSize-1;//显示的li的结束下标
            for (var i = 0; i < lis.length; i++) {//遍历li集合
                lis[i].className =
                    i >= start && i <= end ? ''//遍历到的li下标在开始和结束下标之间，不添加hide隐藏，显示出来
                    : 'hide'//不在开始和结束之间，添加hide样式隐藏
            }
        }
    </script>
</ul>