ecshop商品展示页面鼠标滑过小图显示大图

更新时间：2026-02-18 20:18:50作者：fang

关于如何使ecshop网店里商品图片在能多现实的前提下又不影响客户查看呢？这就需要鼠标经过图片就能切换为大图的功能，具体如何操作呢？鼠标滑过小图显示大图的代码如下：

先打开goods.dwt

添加代码:

function change_img(img_src)

{

document.getElementsByName(“goods_img”)[0].src=img_src;

}

</script>

在<head></head>之间。

然后找到代码：

在”{$goods.goods_name|escape:html}”代码的后面加上：

name="goods_img"

最后打开goods_gallery.lbi

找到代码：

<!– {foreach from=$pictures item=picture}–>

</li>

<!–{/foreach}–>

在class="B_blue"后面加上：

onmouseOver="change_img(this.src)" />

保存，运行即可。

经过上面的测试，鼠标滑过小图，在上面的图片显示位置显示的还是小图，原因在于：onmouseOver=”change_img(this.src)”，这段代码的意思是在上面的图片显示区显示当前的图片地址，this.src，而当前的图片地址正好是小图，解决方法：

将上面提到的：<img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}"

修改为：<img src="{$picture.img_url}"

OK！

问题解决！

手游推荐