昨天朋友問我怎么用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" <img src="images/2.jpg" <img src="images/3.jpg" <img src="images/4.jpg" <img src="images/5.jpg" <img src="images/6.jpg" <img src="images/7.jpg" </div> <script src="js/common.js"></script> <script> //搞一個拼img標簽的函數 傳參數 for循環 //擴展、穩定、兼容、好用(簡單)... //<img src="images/7.jpg" 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> 總結
以上所述是小編給大家介紹的JS實現分頁瀏覽橫向圖片(類輪播)實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
