固定区域内展示图片

最新推荐文章于 2024-08-10 16:15:00 发布

silent-joker

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量440

点赞数

分类专栏： web前端文章标签： javascript html css

本文链接：https://blog.csdn.net/u012894967/article/details/49557603

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>在固定区域内展示图片</title>
	<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<style>
*{
	margin:0;
	padding:0;
}
.outer{
	width:157px;
	height:44px;
	border:1px solid #000;
	margin:20px auto;
	padding:3px;
}
.back,.pic,.forward{
	float:left;
}
.back,.forward{
	padding:2px 0;
}
.pic{
	width:135px;
	height:42px;
	border:1px solid #000;
	position:relative;
}
.pic li{
	list-style:none;
	position:absolute;
	width:37px;
	height:34px;
	padding:3px;
	border:1px solid #999;
}
</style>
</head>
<body>
<div class="outer">
	<div class="back" id="back">
		<img src="img/nav_left.jpg" alt="" />
	</div>
	<div class="pic" id="pic">
		<ul>
			<li><img src="img/02_03.png" alt="icon" /></li>
			<li><img src="img/02_05.png" alt="icon" /></li>
			<li><img src="img/02_07.png" alt="icon" /></li>
			<li><img src="img/02_09.png" alt="icon" /></li>
			<li><img src="img/02_30.png" alt="icon" /></li>
		</ul>
	</div>
	<div class="forward" id="forward">
		<img src="img/nav_right.jpg" alt="" />
	</div>
</div>
<script>
var oDiv = document.getElementById("pic");
var lis = oDiv.getElementsByTagName("li");
var bDiv = document.getElementById("back");
var fDiv = document.getElementById("forward");
var show = 3;
var index = 0;
function setLeft(index){
	for(var i=0,len=lis.length;i<len;i++){
		lis[i].style.left = (i-index)*45 + "px";
		oDiv.style.overflow = "hidden";
	}
}
setLeft(0);//初始化
fDiv.οnclick=function(){
	setLeft(++index);
	if(index>=lis.length-show){
		var that = arguments.callee;
		fDiv.onclick = null;//最后一张图片出现时，移除“下一张”事件
		bDiv.onclick = function(){
			setLeft(--index);
			if(index<=0){
				bDiv.onclick = null;//第一张图片出现时，移除“上一张”事件
				fDiv.onclick = that;
			}
		};
	}
};
</script>
</body>
</html>

silent-joker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定区域内展示图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在固定区域内展示图片 *{ margin:0; padding:0;}.outer{ width:157px; height:
复制链接

扫一扫

专栏目录