类似于百度首页点击换一换可以反复切换内容
以下是我的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代码帮忙补一下
<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>