JS图片展示效果(0 位领导批示)-银子 ’s 博客-工作手记

JS图片展示效果(0 位领导批示)

2007-11-17
分类：JavaScript
作者：银子
1,792 位领导视察

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="wuleying" />
<title>图片展示</title>
<style>
* {margin:0;padding:0;font-size:12px;}
body {background:#000;}
ul {list-style:none;}
#box {margin:20px auto;width:600px;border:1px solid #ccc;height:70px;overflow:hidden;}
#box_l,
#box_r {float:left;padding:28px 6px 0 6px;background:#ccc;height:42px;cursor:pointer;color:#06c;}
#box_r.down,
#box_l.down {background:#999;color:#fff;}
#box_r {float:right;}
#box_c {float:left;width:564px;overflow:hidden;padding-top:4px;}
#box_c img {width:100px;height:60px;border:1px solid #ccc;}
#box_c li {float:left;display:inline;margin:0 2px 0 2px;}
#box_c ul {width:1000px;margin-left:2px;}
.alert {z-index:1000;filter:alpha(opacity=80);opacity:0.8;position:absolute;left:434px; top:409px;border:1px solid #ff0;background:#ffc;width:120px; height:16px;text-align:center;padding-top:4px;color:#111;}
.none {display:none;}
#show {border:1px solid #ccc;padding:3px;width:400px;height:300px;margin:40px auto;}
#show img {width:400px;height:300px;cursor:pointer;}
</style>
</head>
<body>
<div id="show">
<img src="" id="showpic" />
</div>
<div id="box">
<div id="box_l">«</div>
<div id="box_c">
<ul>
<li><a href="#"><img src="http://smallpic.zcool.com.cn/share/nr1.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://smallpic.zcool.com.cn/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://smallpic.zcool.com.cn/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://smallpic.zcool.com.cn/vector/people1/060_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://smallpic.zcool.com.cn/share/sl.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://smallpic.zcool.com.cn/vector/design1/139_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://smallpic.zcool.com.cn/share/sl1.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://smallpic.zcool.com.cn/vector/design1/138_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://smallpic.zcool.com.cn/png3/052.jpg" alt="" /></a></li>
</ul>
</div>
<div id="box_r">»</div>
</div>
<div class="none" id="sorry">对不起,到头了!</div>
<script type="text/javascript">
var box = document.getElementById("box_c");
var boxl = document.getElementById("box_l");
var boxr = document.getElementById("box_r");
var ts = document.getElementById("sorry");
i = 0;
function scrollFunLeft()
{
i++;
if(box.scrollLeft<386)
{
box.scrollLeft+=i;
ts.className="";
}
else
{
clearInterval(t);
i=0;
ts.className="alert";
}
}
function scrollFunRight()
{
i++;
if(box.scrollLeft>0)
{
box.scrollLeft-=i;
ts.className="";
}
else
{
clearInterval(t);
i=0;
ts.className="alert";
}
}
boxl.onmouseover = function(){t=setInterval(scrollFunRight,70);boxl.className="down"}
boxl.onmouseout = function() {clearInterval(t);i=0;boxl.className="";ts.className="";}
boxr.onmouseover = function(){t=setInterval(scrollFunLeft,70);boxr.className="down";}
boxr.onmouseout = function() {clearInterval(t);i=0;boxr.className="";ts.className="";}
/*显示大图*/
var pic = document.getElementById("showpic");
var imgs = document.getElementById("box_c").getElementsByTagName("img");
for(i=0;i<imgs.length;i++)
{
window.onload = function() {pic.src= imgs[0].src;}
imgs[i].onmouseover = function() {pic.src = this.getAttribute('src');}
imgs[i].onclick = function() {window.open(this.getAttribute('src'));}
pic.onclick = function() {window.open(this.getAttribute('src'));}
}
</script>
</body>
</html>