touchTouch响应式支持移动端相册展示效果

所属分类:媒体-图片展示,幻灯片和轮播图

 30297  340  查看评论 (27)
分享到微信朋友圈
X
touchTouch响应式支持移动端相册展示效果 ie兼容7

更新时间:2020-03-21 23:37:06

更新说明:更新新版谷歌浏览器必须要在执行事件处理函数之后,没有掉用过 preventDefault() 报错问题


更新时间:2017-8-12 10:32:41

更新说明:原来console.log()会影响页面渲染,console在8+才开始引入,所以在低版本浏览器是没办法获取到其对象,在开发时没有将其去掉,导致低版本浏览器不能使用,此次更新其问题。


使用方法

引入相关文件:

<link rel="stylesheet" type="text/css" href="css/touchTouch.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/touchTouch.jquery.js"></script>

单个列表:

<div class="exc1">
      <a href="images/imgb1.jpg"><img src="images/imgb1.jpg"></a>
      <a href="images/imgb2.jpg"><img src="images/imgb2.jpg"></a>
      <a href="images/imgb3.jpg"><img src="images/imgb3.jpg"></a>
</div>

多个列表图片展示:

<div class="exc2">
     <div class="list">
       <ul>
           <li><a href="images/imgb1.jpg"><img src="images/imgb1.jpg"></a></li>
           <li><a href="images/imgb2.jpg"><img src="images/imgb2.jpg"></a></li>
           <li><a href="images/imgb3.jpg"><img src="images/imgb3.jpg"></a></li>
           <li><a href="images/imgb4.jpg"><img src="images/imgb4.jpg"></a></li>
       </ul>
     </div>
     <div class="list">
       <ul>
           <li><a href="images/imgb1.jpg"><img src="images/imgb1.jpg"></a></li>
           <li><a href="images/imgb2.jpg"><img src="images/imgb2.jpg"></a></li>
           <li><a href="images/imgb3.jpg"><img src="images/imgb3.jpg"></a></li>
           <li><a href="images/imgb4.jpg"><img src="images/imgb4.jpg"></a></li>
       </ul>
     </div>
    </div>
相关插件-图片展示,幻灯片和轮播图

jQuery图片放大插件

jQuery点击图片放大,适应移动端和PC端
  图片展示
 38235  311

jQuery仿淘宝评论区

jQuery仿淘宝评论区图片放大预览
  图片展示
 12109  193

立体图片展示

图片随鼠标转向
  图片展示
 30869  455

JQUERY全屏撕裂幻灯片-FULLSCREEN-SLIT-SLIDER

fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片,接下来我就为大家讲解以下相关的用法。
  图片展示
 39720  401

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

    人土土 0
    2019/9/30 17:33:55
    移动端没滑动一次,就会增加一条报错
        yoonfeng0
        2020/3/21 17:26:54
        新版本已经修复此问题
    回复
    ζ??不 ??羁 ??? 0
    2018/7/18 8:35:44
    可以添加个手势缩放的功能吗?救急 回复
    画个圈就是终点 0
    2018/6/12 14:31:55
    老板,可以加手指缩放图片的功能吗? 回复
    DENGLEI啊 0
    2018/6/11 14:29:19
    手机可以滑动切换吗 回复
    んυα 0
    2018/5/23 13:02:28
    作者,这个效果 ie7 左右点击不兼容? 回复
    Jevona 0
    2018/5/18 14:30:14
    在手机端点击图片的时候不能关闭,预览只有点击黑色部分才能关闭。这确实是个头疼的问题。
        Jevona0
        2018/5/18 14:57:58
        Firefox和chrome的模拟器里是可以点图片关闭的,但360模拟器和Android APP只能点旁边空白区域才能关闭。
    回复
    伊枫 0
    2018/4/15 20:33:42
    我想做成把图片url传进去的怎么操作? 回复
    王? ̄小正 0
    2018/3/19 16:11:34
    次插件不能显示png格式的图片,只显示jpg格式的,作者有没有改进的方法
        yoonfeng0
        2018/4/12 11:20:47
        这边测试多遍都没此问题呢,亲检查下图片的路径是否引入正确?
        王? ̄小正0
        2018/4/15 20:35:25
        我不知道什么原因,png格式不显示,我是做后端的,前端是小白,呜呜
        王? ̄小正0
        2018/4/15 20:48:06
        好像又好使了
    回复
    杨光-黑龙江亿林网络股 0
    2018/3/5 14:39:29
    我看js文件里面有关闭的div 但是没有显示啊
        yoonfeng0
        2018/4/12 11:19:49
        需要关闭按钮可以自行添加哈
    回复
    乐拜网络工作室 0
    2018/1/5 18:40:09

    怎么在幻灯片上加标题呢

        yoonfeng0
        2018/1/23 11:02:49
        可以在js里面增加模块
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复