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

 查看演示  website  立即下载

一、引入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' 
});

PREVIOUS:
NEXT:
jQuery筛选器（原创）
前端表格排序插件，支持ajax分页