多图片鼠标滑动自动切换效果
时间:2009年10月30日作者:青雨被围观 913 次评论次数:0
一段JS代码,可实现多图片鼠标滑动自动切换,类似360buy.com(示例)或newegg.com.cn(示例)的产品展示界面,即鼠标滑过产品缩略图,自动切换大图的效果:
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> |
这代码主要用来做产品展示,效果挺好的。里面有一些多余的代码,根据需要自行修改即可!
发表评论


暂时没有评论!