您现在的位置是：首页 > cms教程 > Ecshop商城教程Ecshop商城教程

ecshop商品相册鼠标移动滑过小缩略图显示大商品图片

郭俊立2024-03-30Ecshop商城教程已有人查阅

导读部分人ECSHOP模板商品页面商品相册缩略图小图要靠点击才会显示商品大图先打开goods.dwt在之间。然后找到代码：

部分人ECSHOP模板商品页面商品相册缩略图小图要靠点击才会显示商品大图先打开goods.dwt
添加代码:

<script type="text/javascript">
function change_img(img_src)
{
document.getElementsByName(“goods_img”)[0].src="/a/2406248/img_src;}
</script>

在<head></head>之间。
然后找到代码：
<img src="/a/2406248/{$goods.goods_img}" rel="nofollow"/>在”{$goods.goods_name|escape:html}”代码的后面加上：
name="goods_img"
最后打开goods_gallery.lbi
找到代码：

<!- {foreach from=$pictures item=picture}->
<li><a href="/a/2406248/gallery.php?id={$id}&img={$picture.img_id}" target="_blank" rel="nofollow"></li>
<!-{/foreach}->

在class="B_blue"后面加上：

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

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

<img src="/a/2406248/{if" rel="nofollow"/>

修改为：

<img src="/a/2406248/{$picture.img_url}" rel="nofollow"/>

OK！

本文标签：

很赞哦！ ()

上一篇：ecshop去版权标志删除Powered by ecshop

下一篇：ecshop用户协议字体颜色怎么修改

图文教程

相关源码

(自适应)英文外贸电子设备网站模板三级子目录基于PbootCMS内核开发的响应式英文网站模板，为外贸企业打造，支持多行业快速适配。通过简洁高效的代码架构，帮助企业低成本构建专业海外形象，实现更好客户触达与订单转化。查看源码
(自适应)大气办公用品耗材供应打印机产品维修网站模板下载基于PbootCMS系统开发的响应式网站模板，为营销技术博主、数字产品评测者设计。采用前沿的响应式技术，确保内容在手机端和桌面端都能获得较佳阅读体验，帮助用户高效展示技术文章和产品分析。查看源码
(PC+WAP)房屋建造建筑工程房地产建材行pbootcms网站模板下载本模板基于PbootCMS内核开发，为房屋建造、建筑工程及房地产建材类企业设计。通过本模板可快速搭建具有行业特色的企业官网，只需替换文字与图片内容即可适配其他行业使用。查看源码
帝国cms大气淘宝客网站源码带手机版带火车头采集本款创意礼物导购网站模板为礼物类电商平台设计，采用清爽简约的界面风格，具备完善的商品导购功能。系统支持在文章攻略中灵活插入商品购买链接，实现内容与电商的结合。查看源码
快递物流公司pbootcms网站模板html响应式自适应源码下载基于HTML5+CSS3前沿技术开发，实现PC、平板、手机多端自适应。采用弹性布局与媒体查询技术，确保不同设备均有流畅视觉体验，企业形象统一。查看源码
(PC+WAP)中英双语户外用品帐篷装备pbootcms网站模板下载这款基于PbootCMS开发的中英文双语模板专为户外装备行业设计，适配PC和移动设备。模板采用现代化设计风格，突出户外产品的功能性和实用性，帮助企业建立专业的国际化展示平台。查看源码