簡單來說，情況是這樣的，假如做好了對動漫每一集進行分頁，如下圖：
但當分頁太多就會變得不能看，而且前后箭頭也不能只是擺設。
想要得到類似這樣效果：
網上搜了一會翻頁相關的庫沒什么效果，也不太合適自己的項目應用。
於是決定自己寫一個。
pageturn.js:
function get_segment(aid, size) {
var start = 0, end = 0;
var count_switch = true;
for (var i = 1; i <= size; i++) {
if (document.getElementById(aid + i.toString()).style.display != 'none') {
if (count_switch) {
start = i;
count_switch = false;
}
else {
end = i;
}
}
}
return [start, end];
};
function prev_page_turn(aid, start, end, step) {
for (var i = 0; i < step; i++) {
if (start == 1)
break;
$("#" + aid + end.toString()).hide(500);
start -= 1;
$("#" + aid + start.toString()).show(500);
end -= 1;
}
};
function next_page_turn(aid, start, end, step, size) {
for (var i = 0; i < step; i++) {
if (end == size)
break;
$("#" + aid + start.toString()).hide(500);
end += 1;
$("#" + aid + end.toString()).show(500);
start += 1;
}
};
# 用法見 31 line
test.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="pageturn.js"></script>
</head>
<body>
<ul class="pagination">
<li><a id="prev-page">«</a></li>
<li><a href="#" id="av8299421" title="夢ちゃん">第 1 集</a></li>
<li><a href="#" id="av8299422" title="夢ちゃん">第 2 集</a></li>
<li><a href="#" id="av8299423" title="夢ちゃん">第 3 集</a></li>
<li><a href="#" id="av8299424" title="夢ちゃん">第 4 集</a></li>
<li><a href="#" id="av8299425" title="夢ちゃん">第 5 集</a></li>
<li><a href="#" id="av8299426" title="夢ちゃん" style="display:none">第 6 集</a></li>
<li><a href="#" id="av8299427" title="夢ちゃん" style="display:none">第 7 集</a></li>
<li><a href="#" id="av8299428" title="夢ちゃん" style="display:none">第 8 集</a></li>
<li><a href="#" id="av8299429" title="夢ちゃん" style="display:none">第 9 集</a></li>
<li><a href="#" id="av82994210" title="夢ちゃん" style="display:none">第 10 集</a></li>
<li><a href="#" id="av82994211" title="夢ちゃん" style="display:none">第 11 集</a></li>
<li><a href="#" id="av82994212" title="夢ちゃん" style="display:none">第 12 集</a></li>
<li><a href="#" id="av82994213" title="夢ちゃん" style="display:none">第 13 集</a></li>
<li><a href="#" id="av82994214" title="夢ちゃん" style="display:none">第 14 集</a></li>
<li><a id="next-page">»</a></li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
var size = 14; // 集數
var aid = "av829942"; // 視頻 id 前綴
var prev_click = true;
var next_click = true;
$('#prev-page').bind('click', function () {
if (prev_click) {
prev_click = false;
var get_value = get_segment(aid, size);
var start = get_value[0], end = get_value[1];
if (start > 1) {
prev_page_turn(aid, start, end, 3);
}
setTimeout(function () {
prev_click = true;
}, 500);
}
});
$('#next-page').bind('click', function () {
if (next_click) {
next_click = false;
var get_value = get_segment(aid, size);
var start = get_value[0], end = get_value[1];
if (end < size) {
next_page_turn(aid, start, end, 3, size);
}
setTimeout(function () {
next_click = true;
}, 500);
}
});
});
</script>
</body>
</html>
可自行配制 step 來控制點一次的翻頁速度。