ホームページ > 記事 > ウェブフロントエンド > 横長画像のページ分割ブラウジングのJS実装の詳細例
横長画像のページ分割ブラウジングのJS実装の詳細例
- 小云云オリジナル
- 2017-12-26 13:52:272063ブラウズ
この記事では、主に横方向の画像のページングブラウジング（カルーセル風）を実装するための JS サンプルコードを紹介します。コードはシンプルで理解しやすく、必要な方は参考にしていただければ幸いです。それはすべての人を助けることができます。
昨日、友人が私に、js を使って水平方向の画像のページング ブラウジングを実現する方法を尋ねました。実際、実装コードは次のとおりです。 common.js
function $(id) {
return document.getElementById(id);
}
function $_tag(tag) {
return document.getElementsByTagName(tag);
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
cursor: pointer;
}
.p1 {
width: 410px; /* 可以去掉 */
height: 100px;
overflow-x: hidden;
white-space: nowrap;
}
.p2 {
display: none;
}
</style>
</head>
<body>
<p class="p1" id="p1">
</p>
<a onclick="pre()">上一页</a>
<a onclick="next()">下一页</a>
<p class="p2">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
<img src="images/7.jpg" alt="">
</p>
<script src="js/common.js"></script>
<script>
//搞一个拼img标签的函数 传参数 for循环
//扩展、稳定、兼容、好用(简单)...
//<img src="images/7.jpg" alt="">
var count = 4; // 每页的图片数目
var currentpage = 1; //当前页数
var imgs = $_tag("img");
//console.log(imgs); 可以深入了解下
console.log("图片总数：" + imgs.length);
var totalpage = Math.ceil(imgs.length/count);
console.log("总页数：" + totalpage);
function pre() {
if(currentpage == 1){
console.log("已经是第一页了!");
return;
}else if(currentpage > 1){
var tmp = (currentpage - 2) * count + 1;
var str = "";
str += "<img src='" + "images/" + tmp + ".jpg'>";
str += "<img src='" + "images/" + (tmp+1) + ".jpg'>";
str += "<img src='" + "images/" + (tmp+2) + ".jpg'>";
str += "<img src='" + "images/" + (tmp+3) + ".jpg'>";
currentpage -= 1;
console.log(str);
$("p1").innerHTML = str;
}
}
function next() {
if(currentpage == totalpage){
console.log("已经是最后一页了!");
}else if(currentpage == (totalpage - 1)){
var sur = imgs.length % count;
var tmp1 = currentpage * count + 1;
var str = "";
console.log("剩余数:" + sur);
for(var i=0;i<sur;i++){
console.log("第几张：" + (tmp1+i));
str += "<img src=\"" + "images/" + (tmp1+i) + ".jpg\">";
}
currentpage += 1;
console.log(str);
$("p1").innerHTML = str;
}else if(currentpage > 0){
var tmp = currentpage * count + 1;
console.log("tmp:" + tmp);
var str = "";
str += "<img src='" + "images/" + tmp + ".jpg'>";
str += "<img src='" + "images/" + (tmp+1) + ".jpg'>";
str += "<img src='" + "images/" + (tmp+2) + ".jpg'>";
str += "<img src='" + "images/" + (tmp+3) + ".jpg'>";
currentpage += 1;
$("p1").innerHTML = str;
}
}
function firstpage() {
var str = "";
str += "<img src='" + "images/" + 1 + ".jpg'>";
str += "<img src='" + "images/" + 2 + ".jpg'>";
str += "<img src='" + "images/" + 3 + ".jpg'>";
str += "<img src='" + "images/" + 4 + ".jpg'>";
console.log(str);
$("p1").innerHTML = str;
}
window.onload = function() {
firstpage();
}
</script>
</body>
</html>関連する推奨事項: ページングブラウジングを実装するための
JavaScript+XML テクノロジー_JavaScript スキル
vuejs のアイデアローカルデータのフィルタリングとページングを実装する関数
JavaScript 実装テーブルスクロールページネーションチュートリアル
以上が横長画像のページ分割ブラウジングのJS実装の詳細例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。