昨天朋友问我怎么用js实现分页浏览横向图片功能,其实实现代码很简单的,下面小编给大家带来了具体实现代码,代码如下所示:
common.js
function $(id) {
return document.getElementById(id);
}
function $_tag(tag) {
return document.getElementsByTagName(tag);
}
index.html
Documenta {
cursor: pointer;
}
.div1 {
width: 410px; /* 可以去掉 */
height: 100px;
overflow-x: hidden;
white-space: nowrap;
}
.div2 {
display: none;
}
上一页
下一页
//搞一个拼img标签的函数 传参数 for循环
//扩展、稳定、兼容、好用(简单)...
//
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 += "";
str += "";
str += "";
str += "";
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
console.log("第几张:" + (tmp1+i));
str += "";
}
currentpage += 1;
console.log(str);
$("div1").innerHTML = str;
}else if(currentpage > 0){
var tmp = currentpage * count + 1;
console.log("tmp:" + tmp);
var str = "";
str += "";
str += "";
str += "";
str += "";
currentpage += 1;
$("div1").innerHTML = str;
}
}
function firstpage() {
var str = "";
str += "";
str += "";
str += "";
str += "";
console.log(str);
$("div1").innerHTML = str;
}
window.onload = function() {
firstpage();
}
总结
以上所述是小编给大家介绍的JS实现分页浏览横向图片(类轮播)实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!