Home > Article > Web Front-end > Detailed example of JS implementation of paginated browsing of horizontal images

Detailed example of JS implementation of paginated browsing of horizontal images

小云云Original: 2017-12-26 13:52:272110browse

This article mainly introduces the JS example code for implementing paging browsing of horizontal images (carousel-like). The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it. I hope it can help everyone.

Yesterday, a friend asked me how to use js to realize the paging browsing of horizontal pictures. In fact, the implementation code is very simple. The editor below brings you the specific implementation code. The code is as follows:

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; 
  } 
  .p1 { 
   width: 410px; /* 可以去掉 */ 
   height: 100px; 
   overflow-x: hidden; 
   white-space: nowrap; 
  } 
  .p2 { 
   display: none; 
  } 
 </style> 
</head> 
<body> 
 <p class="p1" id="p1"> 
 </p> 
 <a onclick="pre()">上一页</a> 
 <a onclick="next()">下一页</a> 
 <p class="p2"> 
  <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=""> 
 </p> 
 <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=&#39;" + "images/" + tmp + ".jpg&#39;>"; 
    str += "<img src=&#39;" + "images/" + (tmp+1) + ".jpg&#39;>"; 
    str += "<img src=&#39;" + "images/" + (tmp+2) + ".jpg&#39;>"; 
    str += "<img src=&#39;" + "images/" + (tmp+3) + ".jpg&#39;>"; 
    currentpage -= 1; 
    console.log(str); 
    $("p1").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); 
    $("p1").innerHTML = str; 
   }else if(currentpage > 0){ 
    var tmp = currentpage * count + 1; 
    console.log("tmp:" + tmp); 
    var str = ""; 
    str += "<img src=&#39;" + "images/" + tmp + ".jpg&#39;>"; 
    str += "<img src=&#39;" + "images/" + (tmp+1) + ".jpg&#39;>"; 
    str += "<img src=&#39;" + "images/" + (tmp+2) + ".jpg&#39;>"; 
    str += "<img src=&#39;" + "images/" + (tmp+3) + ".jpg&#39;>"; 
    currentpage += 1; 
    $("p1").innerHTML = str; 
   } 
  } 
  function firstpage() { 
   var str = ""; 
   str += "<img src=&#39;" + "images/" + 1 + ".jpg&#39;>"; 
   str += "<img src=&#39;" + "images/" + 2 + ".jpg&#39;>"; 
   str += "<img src=&#39;" + "images/" + 3 + ".jpg&#39;>"; 
   str += "<img src=&#39;" + "images/" + 4 + ".jpg&#39;>"; 
   console.log(str); 
   $("p1").innerHTML = str; 
  } 
  window.onload = function() { 
   firstpage(); 
  } 
 </script> 
</body> 
</html>

Related recommendations:

javascript+xml technology to implement paging browsing_javascript skills

vuejs ideas to implement local data filtering and paging function

JavaScript implementation of table scrolling and paging tutorial

The above is the detailed content of Detailed example of JS implementation of paginated browsing of horizontal images. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief discussion on the direct style of react isomorphismNext article：A brief discussion on the direct style of react isomorphism

See more

Detailed example of JS implementation of paginated browsing of horizontal images

Related articles