昨天朋友问我怎么用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>
总结
以上所述是小编给大家介绍的JS实现分页浏览横向图片(类轮播)实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!
浅谈mint-ui 填坑之路
近期上手vue的移动端项目,舍弃了之前自己相对熟悉的mui框架,改为用饿了么团队为了vue量身定做的mint-ui框架。之前开发的时候觉得mui的文档就足够坑
React Native使用百度Echarts显示图表的示例代码
Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表。相信很多同学在网页端都使用过。今天我就来介绍下在ReactNative中如何使用Echarts
浅谈react 同构之样式直出
前言上文讲到通过同构服务端渲染,可以直出html结构,虽然讲解了样式,图片等静态资源在服务端引入问题的解决方案,但是并没有实际进行相关操作