您现在的位置是：首页 > 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网站模板-蓝色HTML5电脑修理维修店网站源码下载PbootCMS内核开发的营销型网站模板，该模查看源码
(自适应响应式)环保净化器家用电器网站免费模板针对环保设备、环境监测等领域的PbootCMS响应式模板，通过模块化设计清晰展示污水处理技术、空气净化系统等解决方案。移动端呈现环保数据可视化图表，后端统一管理确保项目案例、技术等资料多端同步。查看源码
(自适应响应式)高端家用办公家具家居桌椅pbootcms模板下载为办公家具企业设计的响应式网站模板，涵盖产品展示、案例呈现、企业介绍等核心模块。通过可视化后台可快速发布实木桌椅、系统家具、办公屏风等产品信息，帮助客户直观了解材质参数与空间搭配方案。查看源码
(自适应)工业机械设备产品介绍免费pbootcms源码下载本网站模板基于PbootCMS内核精心开发，为机械设备与工业产品制造企业量身打造。设计充分考量行业特性，突出产品展示与技术实力呈现查看源码
(自适应)WordPress主题SEO自媒体博客资讯模板RabbitV2.0Rabbit v2.0主题专注于网站搜索引擎优化需求，为博客、自媒体及资讯类网站提供专业的SEO技术解决方案。该主题从架构设计到功能实现均围绕搜索引擎优化理念展开。查看源码
帝国CMS7.5漫画网站模板带手机端源码免费下载本模板为漫画内容平台设计开发，采用帝国CMS7.5内核构建，深度优化漫画作品展示结构与章节管理模式。前端采用响应式布局设计，适配各类漫画阅读场景，提供作品分类、连载追踪、热度排行等垂直领域功能模块。查看源码