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 相关文章推荐
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP实现微信退款功能
2018/10/02 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Django中几种重定向方法
2015/04/28 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
护理专业自荐信
2013/12/03 职场文书
加工操作管理制度
2014/01/19 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
ktv筹备计划书
2014/05/03 职场文书
整改通知书
2015/04/20 职场文书
社区文明倡议书
2015/04/28 职场文书
党支部半年考察意见
2015/06/01 职场文书
旅游投诉信范文
2015/07/02 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书