鼠标移动左边的小图,右边显示大图,求大神,在线等啊!
效果就是这样的,跪等啊 。。。。。。。。
[解决办法]
<!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=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,div{margin:0;padding:0}
body,button,input,select,textarea{font:100%/1.5 Arial,Helvetica,tahoma,\5b8b\4f53,sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}
code,kbd,pre,samp{font-family:courier new,courier,monospace}
small{font-size:12px}ul,ol{list-style:none}a{text-decoration:none;color:#fff}
a:hover{color:#fff;text-decoration:none}a:focus{outline:none;-moz-outline:none}
sup{vertical-align:text-top}sub{vertical-align:text-bottom}
legend{color:#000}fieldset,img,a{border:0 none;outline:0 none}
button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}
input,textarea{outline:none}
abbr,article,aside,bb,datagrid,datalist,details,dialog,eventsource,figure,figcaption,footer,header,mark,menu,meter,nav,
output,progress,section,time{display:block;height:auto}
textarea{resize:none}
/* 清除浮动 */
.clearfix:after{clear:both;content:"\20";display:block;font-size:0;height:0;line-height:0;visibility:hidden}
.clearfix{display:block;zoom:1}
.box{width:1200px;position:relative}
.list{margin:20px 0 0 30px}
.list li{float:left;margin-right:20px}
.list li img{width:120px;height:80px}
.showbox{position:absolute;top:0;right:0}
#showimg{width:360px;height:300px}
</style>
<body>
<div class="box">
<ul class="list clearfix" id="list">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.png" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.png" /></li>
<li><img src="img/5.png" /></li>
</ul>
<div class="showbox">
<img src="" id="showimg" />
</div>
</div>
<script type="text/javascript">
var url = ""
var li = document.getElementById("list").getElementsByTagName("img");
for(var i=0; i<li.length; i++){
li[i].onmouseover = function(){
url = this.src;
document.getElementById("showimg").src = url;
}
}
</script>
</body>
</html>