JS实现分页浏览横向图片(类轮播)实例代码
编程学习 2021-07-04 17:32www.dzhlxh.cn编程入门
这篇文章主要介绍了JS实现分页浏览横向图片(类轮播)实例代码,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
昨天朋友问我怎么用js实现分页浏览横向图片功能，其实实现代码很简单的，狼蚁网站SEO优化长沙网络推广给大家带来了具体实现代码，代码如下所示：
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实现分页浏览横向图片(类轮播)实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！