您现在的位置是：首页 > 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用户协议字体颜色怎么修改

图文教程

相关源码

自适应营销型IT网络工作室互联网建站公司pbootcms网站模板为IT网络服务商、建站企业打造的高性能营销门户，基于PbootCMS开源内核深度开发采用HTML5自适应架构，实现PC与手机端数据实时同步交互。查看源码
(自适应)家禽饲养养殖基地pbootcms模板响应式模板下载为家禽饲养企业、养殖基地设计的响应式网站模板，聚焦畜禽产品展示、养殖技术分享及企业信息服务。采用PbootCMS内核开发，响应式技术确保PC与手机端数据实时同步查看源码
(PC+WAP)绿色环保建筑设备通用行业pbootcms源码下载通过模块调整可适配园林景观、装配式建筑、绿色装修等生态建设相关领域。预制绿色建材展示、能耗模拟等专业模块，集成项目案例、环保工艺等建筑行业特色内容结构，测试数据包含LEED认证体系查看源码
(自适应)品牌策划高端设计公司网站pbootcms模板免费下载本模板为品牌策划与设计公司打造，基于PbootCMS内核开发，充分考虑了创意设计行业的视觉展示需求。模板设计风格现代简约，布局合理清晰，呈现设计作品与专业服务，帮助设计公司展示创意实力并吸引潜在客户。查看源码
(PC+WAP)红色户外岗亭钢结构岗亭pbootcms网站模板为钢结构岗亭、户外设施企业打造的高端响应式营销门户，基于PbootCMS开源内核深度开发，采用HTML5自适应架构，实现PC与移动端数据实时同步展示。查看源码
(自适应)品牌创意设计作品工作室pbootcms模板下载该模板适用于品牌策划、艺术设计、广告创意公司官网，亦可通过替换图文快速适配其他行；高端创意设计公司工作室网站源码极简代码架构、艺术化视觉布局、企业级功能扩展性。查看源码