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实现分页浏览横向图片(类轮播)实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了Vue自定义日历小控件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
这篇文章主要介绍了Flutter 超实用简单菜单弹出框 PopupMenuButton功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了js实现精美的银灰色竖排折叠菜单,可实现页面左侧竖排的纵向折叠菜单效果,非常美观实用,需要的朋友可以参考下2015-05-05
下面小编就为大家带来一篇js获取css的各种样式并且设置他们的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
下面小编就为大家带来一篇简单封装js的dom查询实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要为大家介绍了Three.js物理引擎Cannon.js创建简单应用程序详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了JS+CSS实现可拖动的弹出提示框,涉及针对鼠标事件及html元素的操作技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了javascript结合CSS实现苹果开关按钮特效的方法以及全部代码，效果非常不错，兼容性也很好，有需要的小伙伴自己参考下2015-04-04
纯属技术交流，在实际应用中不建议那么做。建议js加载比较好。2009-08-08
这篇文章主要介绍了uni-app微信小程序登录授权的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
最新评论