小程序下载安装_JS完成分页浏览横向图片(类轮播

2021-01-11 13:12

JS实现分页浏览横向图片(类轮播)实例代码       这篇文章主要介绍了JS实现分页浏览横向图片(类轮播)实例代码,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下

昨天朋友问我怎么用js实现分页浏览横向图片功能，其实实现代码很简单的，下面小编给大家带来了具体实现代码，代码如下所示：

common.js

function $(id) { 
 return document.getElementById(id); 
function $_tag(tag) { 
 return document.getElementsByTagName(tag); 
} 

<

 !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 id="div1" 
 /div 
 a 上一页 /a 
 a 下一页 /a 
 div 
 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 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实现分页浏览横向图片(类轮播)实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！