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


Posted in Javascript onNovember 06, 2017

昨天朋友问我怎么用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 相关文章推荐
js 动态加载事件的几种方法总结
Dec 25 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
利用vue实现模态框组件
Dec 19 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 #Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 #Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 #Javascript
vue复合组件实现注册表单功能
Nov 06 #Javascript
基于vue组件实现猜数字游戏
May 28 #Javascript
vue路由嵌套的SPA实现步骤
Nov 06 #Javascript
vue综合组件间的通信详解
Nov 06 #Javascript
You might like
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
javascript模拟评分控件实现方法
2015/05/13 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
快速入门Vue
2016/12/19 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Form表单及django的form表单的补充
2019/07/25 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
面试求职的个人自我评价
2013/11/16 职场文书
施工材料员岗位职责
2014/02/12 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
安全演讲稿开场白
2014/08/25 职场文书
顶岗实习协议书
2015/01/29 职场文书
银行稽核岗位职责
2015/04/13 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
Python进程池与进程锁之语法学习
2022/04/11 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript