jQuery仿淘宝评论图片查看插件

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

 6359  25  查看评论 (2)
jQuery仿淘宝评论图片查看插件 ie兼容7

一、引入jQuery和该插件<

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

二、html

<div class="tm-m-photos">
  	<ul class="tm-m-photos-thumb">
    	<li data-src="img/01.png"> <img src="img/01.png"> <b class="tm-photos-arrow"></b> </li>
    	<li data-src="img/02.png"> <img src="img/02.png"> <b class="tm-photos-arrow"></b> </li>
    	<li data-src="img/03.png"> <img src="img/03.png"> <b class="tm-photos-arrow"></b> </li>
    	<li data-src="img/04.png"> <img src="img/04.png"> <b class="tm-photos-arrow"></b> </li>
  	</ul>
  	<div class="tm-m-photo-viewer"> 
	  	<img src="img/01.png"> 
		<a class="tm-m-photo-viewer-navleft"><i></i></a> 
		<a class="tm-m-photo-viewer-navright"><i></i></a> 
	</div>
</div>

三、js

$(".tm-m-photos").commentImg({
    activeClass: 'tm-current', //缩略图当前状态class,默认'current'     
    nextButton: '.tm-m-photo-viewer-navright', //向后翻页按钮,默认'.next'    
    prevButton: '.tm-m-photo-viewer-navleft', //向前翻页按钮,默认'.prev'    
    imgNavBox: '.tm-m-photos-thumb', //缩略图容器,默认'.photos-thumb'    
    imgViewBox: '.tm-m-photo-viewer' //浏览图容器,默认'.photo-viewer' 
});
相关插件-图片展示

鼠标划过图片放大效果

一般用于展示类,鼠标滑过,图片放大,焦点图
  图片展示
 21393  164

立体图片展示

图片随鼠标转向
  图片展示
 12971  172

jQuery放大镜插件cloudzoom.js

jQuery放大镜插件cloudzoom.js,可以实现切换图片,支持滚轮控制放大比例
  图片展示
 12676  100

纯js写的祝愿墙

这是一款纯js编写的祝愿墙,墙上的祝福标签的位置随机出现,每次刷新,出现的位置各不相同。
  图片展示
 6908  48

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

    - 0
    2018/7/4 15:30:01
    数据动态加载后,初始化插件,为什么有时候查看图片显示正常,有时候不执行呢 回复
    殊途同归。 0
    2018/3/31 17:01:49
    哇 刚想要这种 就找到了 谢谢!! 回复
取消回复
  短信接口