JS实现分页浏览横向图片(类轮播)实例代码
更新时间：2017年11月06日 11:29:18 作者：spfLinux
这篇文章主要介绍了JS实现分页浏览横向图片(类轮播)实例代码,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
昨天朋友问我怎么用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实现分页浏览横向图片(类轮播)实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Javascript之图片的延迟加载的实例详解的相关资料,这里对延迟加载和异步加载进行了详解和使用方法，需要的朋友可以参考下2017-07-07
这篇文章主要介绍了javascript实现列表滚动的方法,较为详细的分析了javascript实现列表滚动的页面布局及javascript滚动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
网易首页的新闻代码...2007-01-01
当编辑某条数据时，再回过头来进行编辑，会发现，里面的数据和没有编辑以前是一样的，这就是ie缓存的问题，下面是一个不错的解决方法2014-08-08
希望页面加载完毕后向左自动滚动一定位置，下面有个不错的方法可以轻松帮大家实现下2014-02-02
Javascript操纵Cookie实现购物车程序...2007-02-02
这篇文章主要介绍了JS运动相关知识点,总结分析了JavaScript运动所涉及的相关知识点与注意事项,并附带了一个JavaScript弹性运动的实例供大家参考,需要的朋友可以参考下2016-01-01
Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系,本文给大家介绍bower依赖包管理工具，感兴趣的朋友一起学习2016-03-03![JavaScript面向对象之体会[总结]](//img.jbzj.com/images/xgimg/bcimg8.png)
看过很多JavaScript书，对JavaScript的面向对象讲的都比较深入，但是并没有做到深入浅出，总结了我做的一些JavaScript程序的经验，以简洁明了的文字使大家明白JavaScript面向对象的实现。2008-11-11
这篇文章主要给大家介绍了关于HTML元素拖拽功能实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
![JavaScript面向对象之体会[总结]](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论