Exemple détaillé d'implémentation JS de navigation paginée d'images horizontales-js tutoriel-php.cn

Exemple détaillé d'implémentation JS de navigation paginée d'images horizontales

小云云

Libérer： 2017-12-26 13:52:27

original

2128 Les gens l'ont consulté

Cet article présente principalement l'exemple de code JS pour implémenter la navigation par pagination d'images horizontales (de type carrousel). Le code est simple et facile à comprendre, très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Hier, un ami m'a demandé comment utiliser js pour réaliser la navigation par pagination d'images horizontales. En fait, le code d'implémentation est très simple. L'éditeur ci-dessous vous apporte le code d'implémentation spécifique.

common.js

function $(id) { 
 return document.getElementById(id); 
} 
function $_tag(tag) { 
 return document.getElementsByTagName(tag); 
}

Copier après la connexion

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>

Copier après la connexion

Recommandations associées :

technologie javascript+xml pour implémenter les compétences de navigation par pagination_javascript

Idées Vuejs à implémenter fonction de filtrage et de pagination des données locales

Implémentation JavaScript du didacticiel de pagination avec défilement de table

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!