JS——分页浏览横向图片(类轮播)

最新推荐文章于 2023-03-29 22:33:16 发布

spfLinux

最新推荐文章于 2023-03-29 22:33:16 发布

阅读量1.4k

点赞数

分类专栏： js 文章标签： JS 图片横向分页

本文链接：https://blog.youkuaiyun.com/spfLinux/article/details/78454124

版权

js 专栏收录该内容

137 篇文章

订阅专栏

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 οnclick="pre()">上一页</a>
	<a οnclick="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>