点击小图显示大图

<!--具体内容-->
<div class="product_block">
<!--左边-->
<div class="product_block_left">
<div class="product_block_left_img"><img src="img/product_test.jpg"  id="prduct_img" width="400" height="400"/></div>
<div class="product_block_left_shuoming"><div class="shuoming">产品说明</div></div>
<div class="product_block_left_content">产品具体说明</div>
</div>
<!--左边-->
<!--右边-->
<div class="product_block_right">

<div class="product_block_right_title" style="border-bottom:1px solid #FFF;">
<div class="company_name">铭亿达建材</div>
<div class="category_name">产品种类一</div>
</div>

<div class="small_list_block">
<div class="small_list_top">产品标准贴</div>
<div class="small_list"><ul>
<li><a href="#" onclick="show('img/product_test_small.jpg')"><img src="img/product_test_small.jpg" width="94" height="94"/></a></li>
<li><img src="img/product_test_small.jpg" /></li>
<li><img src="img/product_test_small.jpg" /></li>
<li><img src="img/product_test_small.jpg" /></li>
<li><img src="img/product_test_small.jpg" /></li>
<li><img src="img/product_test_small.jpg" /></li>
<li><img src="img/product_test_small.jpg" /></li>
<li><img src="img/product_test_small.jpg" /></li>
<li><img src="img/product_test_small.jpg" /></li>
<li><img src="img/product_test_small.jpg" /></li>
<li><img src="img/product_test_small.jpg" /></li>
<li><img src="img/product_test_small.jpg" /></li>
</ul></div>
</div>

</div>
<!--右边-->
</div>
<!--具体内容-->

 

<style>
.product_block{ margin-top:10px}
.product_block_left{ float:left; width:440px; text-align:center}
.product_block_left_img{}
.product_block_left_shuoming{ border-bottom:1px solid #FFF; text-align:left; height:20px; margin-top:20px; margin-bottom:10px; margin-right:20px; line-height:20px;}
.shuoming{ height:20px; background-color:#FFF; width:100px; text-align:center; color:#000; float:left;}
.product_block_left_content{ text-align:left; text-indent:2em; line-height:24px;}
.product_block_right{ float:left; width:254px}
.product_block_right_title{ height:30px;}
.company_name{ float:left; width:80px; background-color:#FFF; color:#000; height:20px; line-height:20px; margin-top:10px;}
.category_name{ float:left; text-indent:10px; font-size:16px; color:#FFF; height:30px; line-height:30px;}
.small_list_block{ margin-top:50px;}
.small_list_top{ text-align:left; color:#FFF;margin:20px; font-size:14px; font-weight:bold;}
.small_list{ height:485px; overflow:scroll;overflow-x:hidden;}
.small_list ul{ margin:0px;}
.small_list ul li{ float:left; width:100px; text-align:center;}
</style>
<script language="javascript">
function show(url)
{
var pic=document.getElementById("prduct_img")
pic.src=url;
}
</script>

注明：

1，使用js获取页面中所有的图片地址

var imgs = document.getElementsByTagName("img");
var imgURLs=new Array(imgs.length);
for(var i = 0;i<imgs.length;i++){
   imgURLs[i] = imgs[i].src;//如果用document.getElementsByTagName("img")[i].src;每取一个图片地址就会对全部图片查找一次，这样效率比较低，还是储存在imgs中比较好！

}
//以上代码最好放在页面的最后面，或window.onload事件里，这样就不会因为页面没有全部加载完而没有全部读取到img元素

2,如何实现点击链接后调用JS代码

首先要在页面中引用test.js
方法如下：
在页面head中
<script language="javascript" src="test.js的路径" type="text/javascript"></script>
在链接中调用test.js里的方法，比如GetResult方法
<a href="http://www.chaoshishebei.com/" onclick="GetResult()">云输入</a>
这样，就可以了

 

转载于:https://www.cnblogs.com/net2/archive/2010/11/23/1885372.html