您的位置：首页 > Web前端 > JavaScript

固定区域内展示图片

2015-11-01 13:16 531 查看

<!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.onclick=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript html css

相关文章推荐

新的分享

章节导航