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

网络编程 2024/11/13 佚名

3 2 1

昨天朋友问我怎么用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="/UploadFiles/2021-04-02/1.jpg">

总结
以上所述是小编给大家介绍的JS实现分页浏览横向图片(类轮播)实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

js,分页横向图片