UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery模仿淘宝评论图片插件

所属分类：媒体-图片展示

 29325  338  查看评论 (12)
分享到微信朋友圈
X
jQuery模仿淘宝评论图片插件 ie兼容9
 查看演示  立即下载

更新时间：2017/11/27 下午3:32:23

更新说明：修复点击左边箭头展示区图片没有变化的bug

使用方法

引用jQuery库

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

html

<div class="tm-m-photos">
  <ul class="tm-m-photos-thumb">
    <li data-src="img/a1.png"> <img src="img/a1.png"> <b class="tm-photos-arrow"></b> </li>
    <li data-src="img/a2.png"> <img src="img/a2.png"> <b class="tm-photos-arrow"></b> </li>
    <li data-src="img/a3.png"> <img src="img/a3.png"> <b class="tm-photos-arrow"></b> </li>
    <li data-src="img/a4.png"> <img src="img/a4.png"> <b class="tm-photos-arrow"></b> </li>
  </ul>
  <div class="tm-m-photo-viewer transition1"> 
	  <img src="img/a1.png"> 
		  <a class="tm-m-photo-viewer-navleft" style="cursor: default;"> <i class="tm-m-photo-viewer-navicon arrow-right">&lt;</i> </a> 
		  <a class="tm-m-photo-viewer-navright" data-spm-anchor-id="a220o.1000855.0.0" style="cursor: pointer;"> <i class="tm-m-photo-viewer-navicon arrow-right">&gt;</i> </a> 
	  </div>
</div>

dom结构调用

$(function () {
        var obj = new commentMove('.tm-m-photos', '.tm-m-photo-viewer');
        obj.init()
})
相关插件-图片展示
查看更多

鼠标划过图片放大效果

 一般用于展示类，鼠标滑过，图片放大，焦点图
  图片展示
 47594  479

jQuery移动端图片查看插件photoswipe.js

 实现了移动端图片查看缩放，左右切换效果
  图片展示
 76213  443

jQuery商品放大镜预览代码

 jQuery商品放大镜特效加点击放大全屏切换
  图片展示
 25761  327

jQuery支持图片放大缩小查看效果

 e-smart-zoom-jquery.js插件页面上提供了两个按钮，可以让你的图片点击放大或者缩小当然，对于懒人来说，真是懒得点击那么你可以将鼠标悬停在图片上，滚动鼠标滚轮即可实现图片的放大或者缩小效果
  图片展示
 177906  562

讨论这个项目（12）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    IQ 忘了 0
    2018/3/6 16:02:26
    在图片大小不一样的情况下，点击左右按钮，显示的图片不是原本图片的尺寸大小
    回复
    断了线的风筝 0
    2018/1/4 17:27:00

    我发现多处用到 用同一个类名 的话 会相互影响的

        .一种感觉┑0
        2018/1/5 9:50:09

        你的改好了么，我也遇到了这个问题

        liz0
        2018/7/25 11:19:27
        把插件里面的样式名字改为特殊一点的就行了
    回复
    且听风吟 0
    2017/12/21 17:47:19

    点击li，隐藏图片时console会报错查找不到图片undefind，解决办法在new Image外面加层if(src)就行了。

    回复
    jqtestcom 0
    2017/11/28 15:11:47

    var img = new Image(); 里的img.src写到img.onload后面，这样可以支持IE8

    回复
    我来自1993@ 0
    2017/11/27 15:25:31

    可以往右翻但是不能往左 代码有点问题

        梁婷婷0
        2017/11/27 15:41:27
        稍后更新就可以了
    回复
    大大大大大膈排?? 0
    2017/11/27 15:20:14
    制作十分精美,图片很好看.有一个小BUG,就是如果有两条以上的评论的话,点击图片会展开所有的.
        ㄊ??质?ㄉ0
        2018/1/4 15:00:56

        嗯嗯，我也遇见这个问题了，怎么解决呢

        .一种感觉┑0
        2018/1/5 9:58:19
        怎么解决的 我也遇到了
        夏陌0
        2018/1/25 15:03:08

        解决了没

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复