有没有可以实现在商品列表鼠标经过小图切换相应大图的模块

Zen Cart 模板、教程、设计、使用交流
版面规则
严禁盗版、侵权的模板下载、讨论,违者封ID、IP。

有没有可以实现在商品列表鼠标经过小图切换相应大图的模块

帖子Energyjonm » 2015-10-15 0:56

类似小米网站上的产品列表特效:
http://list.mi.com/7-0-0-0-0-0-0-0-1

如何在zencart的商品列表上加入这种功能呢?

就是商品列表同时在主图下方显示几个小图,鼠标划过小图的时候,主图跟着切换。
图片
Energyjonm
普通会员
普通会员
 
帖子: 33
注册: 2013-01-05 17:37

Re: 有没有可以实现在商品列表鼠标经过小图切换相应大图的模块

帖子Energyjonm » 2015-10-15 15:53

找到一段特效代码:
代码: 全选
<html>
    <head>
    <title>最简洁的JS代码实现鼠标指向小图切换大图效果丨芯晴网页特效丨CsrCode.Cn</title>
    </head>
    <body>
    <script>
    function showDaTu(src){
    document.getElementById("defaultImg").src=src;
    }
    </script>
    <img src="/images/1.jpg" id="defaultImg">
    <br><br>
    <img src='/images/s1.jpg' onmouseover="showDaTu('/images/1.jpg')">
    <img src='/images/s2.jpg' onmouseover="showDaTu('/images/2.jpg')">
    <img src='/images/s3.jpg' onmouseover="showDaTu('/images/3.jpg')">
    <img src='/images/s4.jpg' onmouseover="showDaTu('/images/4.jpg')">
    <img src='/images/s5.jpg' onmouseover="showDaTu('/images/5.jpg')">
    <img src='/images/s6.jpg' onmouseover="showDaTu('/images/6.jpg')">
    <br>请等待图片加载完成……然后鼠标放小图上就会切换了。
    </body>
    </html>
    <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>
   


有没有大神知道这样的代码应该嵌到zencart哪个文件中去呢?
Energyjonm
普通会员
普通会员
 
帖子: 33
注册: 2013-01-05 17:37

Re: 有没有可以实现在商品列表鼠标经过小图切换相应大图的模块

帖子li-he-qi » 2015-10-16 9:56

KIRA大神的杰作:

JQLightBox+JQZoom_For_ZenCart 修改版:
topic136304.html

Zen Cart 商品页图片展示增强(GPE) 模块:
topic216903.html
li-he-qi
VIP会员
VIP会员
 
帖子: 544
注册: 2010-09-22 22:47

Re: 有没有可以实现在商品列表鼠标经过小图切换相应大图的模块

帖子majun8030 » 2015-10-19 15:12

http://www.zenzc.com/xbox8/ 是不是这样的效果 还支持手机模式
www.zenzc.com www.zen-cart.tv www.lvlve.cn
majun8030
中级会员
中级会员
 
帖子: 58
注册: 2010-05-09 1:49
地址: http://www.znezc.com
QQ 帐号: 37037738


  • 相关话题
    回复总数
    阅读次数
    最新文章

回到 模板美工



在线用户

正在浏览此版面的用户:没有注册用户 和 2 位游客