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

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

common.js

function $(id) {

return document.getElementById(id);

}

function $_tag(tag) {

return document.getElementsByTagName(tag);

}

index.html

Document

a {

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