您的位置：首页 > 运维架构

ecshop相册实现鼠标滑过小图切换大图功能

2015-05-12 12:05 447 查看
关于如何使ecshop商品页，商品相册鼠标滑过小图显示大图的功能实现如下：

先打开goods.dwt 

添加代码: 

<script type="text/javascript">

function change_img(img_src)

{

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

}

</script>

在<head></head>之间。

然后找到代码： 

<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" > 

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

name="goods_img" width="360" height="360"/>

最后打开goods_gallery.lbi

找到代码：

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

    <li>

        <a href="gallery.php?id={$id}&img={$picture.img_id}" target="_blank">

<img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" class="B_blue" />

        </a>

    </li>

<!--{/foreach}-->

在class="B_blue"后面加上：

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

这样就实现了商品相册鼠标滑过小图显示大图的功能，但此时，鼠标滑过小图时，大图可能会是模糊的，这是因为图片路径src="{if $picture.thumb_url}{$picture.thumb_url} 中显示图片的值是thumb_url，这个值是缩略图，此时只需将thumb_url改为goods_img即可。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ecshop相册实现鼠标滑过小图切换大图
相关文章推荐
新的分享
章节导航