JS实现分页浏览横向图片(类轮播)实例代码

2024-05-06 16:40:44

字体：大中小

来源：转载

供稿：网友

昨天朋友问我怎么用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武林网网站的支持！

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：解决option标签selected=＂selected＂属性失效的问题

下一篇：浅谈ES6 模板字符串的具体使用方法