想做一個簡單的翻頁效果，但是每次加載后點擊下一頁，直接從第一頁翻到第三頁。點擊回到第一頁，再往下翻頁又是正常的，不知道為什么，求大佬指點一下
js部分：
<script type="text/javascript">
var arr = [ 0, 1, 2, 3 ];
index = 0;
$(function() {
var $yy = $(".yy");
$yy.get(1).innerHTML = 1;
var $classify = $(".classify");
$classify.get(0).style = "display:block";
$classify.get(1).style = "display:none";
$classify.get(2).style = "display:none";
$classify.get(3).style = "display:none";
var $yy = $(".yy").get(4).innerHTML = arr.length;
});
function changePage(i) {
index = i;
console.info(index);
/* alert(index); */
if (index == 4) {
alert("已到達最后一頁！");
}
if (index < 0) {
index = 0;
}
if (index > 3) {
index = 3;
}
var $classify = $(".classify");
var $next1 = $(".next").get(0).value;
$next1 = arr[index];
var $next2 = $(".next").get(1).value;
$next2 = arr[index];
var $yy = $(".yy").get(1);
switch (index) {
case 0:
$classify.get(index).style = "display:block";
$classify.get(index + 1).style = "display:none";
$classify.get(index + 2).style = "display:none";
$classify.get(index + 3).style = "display:none";
$yy.innerHTML = index + 1;
break;
case 1:
$classify.get(index - 1).style = "display:none";
$classify.get(index).style = "display:block";
$classify.get(index + 1).style = "display:none";
$classify.get(index + 2).style = "display:none";
$yy.innerHTML = index + 1;
break;
case 2:
$classify.get(index - 2).style = "display:none";
$classify.get(index - 1).style = "display:none";
$classify.get(index).style = "display:block";
$classify.get(index + 1).style = "display:none";
$yy.innerHTML = index + 1;
break;
case 3:
$classify.get(index - 3).style = "display:none";
$classify.get(index - 2).style = "display:none";
$classify.get(index - 1).style = "display:none";
$classify.get(index).style = "display:block";
$yy.innerHTML = index + 1;
break;
}
}
HTML部分：
<div class="theme1">
<p class="themeheader">詩歌專欄
<ul class="classify">
<li><a href="https://bbs.csdn.net/topics/poem1.html">詩歌 | 等雨也等你</a></li>
<li><a href="https://bbs.csdn.net/topics/poem2.html">詩歌 | 這個雨天，沒有故事</a></li>
</ul>
<ul class="classify">
<li><a href="https://bbs.csdn.net/topics/essay1.html">散文 | 迷情冬雨</a></li>
<li><a href="https://bbs.csdn.net/topics/essay2.html">散文 | 說不盡的夏河里（上）</a></li>
</ul>
<ul class="classify">
<li><a href="https://bbs.csdn.net/topics/essay1.html">散文 | 花海游記</a></li>
<li><a href="https://bbs.csdn.net/topics/essay2.html">散文 | 說不盡的夏河里（上）</a></li>
</ul>
<ul class="classify">
<li><a href="https://bbs.csdn.net/topics/essay1.html">散文 | 煙雨落花</a></li>
<li><a href="https://bbs.csdn.net/topics/essay2.html">散文 | 雨滴落的街道</a></li>
</ul>
</div>
<button onclick="changePage(--index)" class="next">上一頁</button>
<span class="yy">第</span><span class="yy"></span><span class="yy">頁</span><span class="yy">共</span><span class="yy"></span><span class="yy">頁</span>
<button onclick="changePage(++index)" class="next">下一頁</button>
uj5u.com熱心網友回復：
這個問題已經解決啦，：：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/101274.html
標籤：JavaScript