昨天朋友问我怎么用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; } .div1 { width: 410px; /* 可以去掉 */ height: 100px; overflow-x: hidden; white-space: nowrap; } .div2 { display: none; } </style> </head> <body> <div class="div1" id="div1"> </div> <a onclick="pre()">上一页</a> <a onclick="next()">下一页</a> <div class="div2"> <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=""> </div> <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); $("div1").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); $("div1").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; $("div1").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); $("div1").innerHTML = str; } window.onload = function() { firstpage(); } </script> </body> </html>
内容版权声明:除非注明,否则皆为本站原创文章。