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

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

 4235  15  查看评论 (1)
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' 
});
相关插件-图片展示

纯js图片旋转

JavaScript图片特效
  图片展示
 15184  109

javascript动感相册

javascript实现动感相册,放大缩小,不依赖其它库
  图片展示
 16241  74

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

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

jQuery模仿PPTCSS3介绍

jQuery模仿PPTCSS3介绍,使用鼠标滚轮进行切换
  图片展示
 6665  39

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

    殊途同归。 0
    2018/3/31 17:01:49
    哇 刚想要这种 就找到了 谢谢!! 回复
取消回复