多图片鼠标滑动自动切换效果

时间:2009年10月30日作者:青雨被围观 913 次评论次数:0

一段JS代码,可实现多图片鼠标滑动自动切换,类似360buy.com(示例)或newegg.com.cn(示例)的产品展示界面,即鼠标滑过产品缩略图,自动切换大图的效果:

22

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<img id="PhotoView" src="" border="0" onclick="window.open(this.src);" style="display:none;cursor:pointer;" alt="点击放大"/>
<script language="javascript">
<!--
var _PhotoList = new Array();
_PhotoList[0] = '1.jpg';
_PhotoList[1] = '2.jpg';
_PhotoList[2] = '3.jpg';
_PhotoList[3] = '4.jpg';
 
function changePhoto(_index)
 {
 document.getElementById('PhotoView').src = './'+_PhotoList[_index];
 }
 
if(_PhotoList.length > 0)
{
 document.getElementById('PhotoView').style.display = '';
 document.getElementById('PhotoView').src = './'+_PhotoList[0];
 
 document.write('<div style="width:500px;">');  
 for(var i=_PhotoList.length-1; i>-1; i--)
 {
 document.write('<div style="cursor:pointer;float:right;margin:5px 5px 0 0;" onmouseover="changePhoto('+i+');"><IMG src="./'+_PhotoList[i]+'" width="120" height="80" /></div>');
 }
 document.write('</div>'); 
}
//-->
</script>

这代码主要用来做产品展示,效果挺好的。里面有一些多余的代码,根据需要自行修改即可!

标签:分类:Code/Js
0条评论

暂时没有评论!

发表评论

*

*