이 글에서는 수평 이미지(회전식 이미지)의 페이징 브라우징을 구현하기 위한 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 아이디어 로컬 데이터 필터링 및 페이징 구현 function
JavaScript 구현 테이블 스크롤 페이지 매김 튜토리얼
위 내용은 수평 이미지의 페이지 매김 브라우징에 대한 JS 구현의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!