jQuery模仿淘宝评论图片插件

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

 3256  24  查看评论 (9)
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()
})
相关插件-图片展示

jQuery背景墙聚光灯效果代码

jQuery背景墙聚光灯效果代码
  图片展示
 10089  40

Apple TV的海报视差效果

CSS和jQuery重现这种现象
  图片展示
 10171  91

HTML5卡片人物介绍动画展示效果

HTML5卡片人物介绍动画展示效果ie9和ie10没有测试,ie8以下不支持。基于bootstrap框架制作
  图片展示
 15283  148

jQuery图片放大镜(原创)

使用背景定位制作的一个图片放大镜
  图片展示
 11833  77

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币

    断了线的风筝 0
    2018/1/4 17:27:00

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

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

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

    回复
    且听风吟 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
        怎么解决的 我也遇到了
    回复
取消回复