JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<h1>多张图片旋转互不影响，点击小图变大图，然后往左转，往右转</h1>
	<ul class="imgList">
	  <li class="parentCls"> <a class="artZoom" href="http://m1.img.srcdd.com/farm5/d/2014/0718/21/EDEF32A674C1217FB6F80851514C124E_B250_400_250_278.jpeg"><img src="http://m1.img.srcdd.com/farm4/d/2014/0718/21/31789C10D628913054C9B7F3A11D3519_B250_400_150_108.jpeg" /></a> </li>
	  <li class="parentCls"> <a class="artZoom" href="http://m1.img.srcdd.com/farm5/d/2014/0718/21/EDEF32A674C1217FB6F80851514C124E_B250_400_250_278.jpeg"><img src="http://m1.img.srcdd.com/farm4/d/2014/0718/21/31789C10D628913054C9B7F3A11D3519_B250_400_150_108.jpeg" /></a> </li>
	</ul>

CSS

body { font-size:75%; font-family:'微软雅黑'; }
	img { border:0 none; }
	p, ul { padding:0; margin:0; }
	ul, ol, li { list-style:none; }
	#about { width:550px; margin:0 auto;padding-bottom:20px; border-bottom:1px solid #CCC; }
	#about .planeart, #about .planeart a { color:#CCC; }
	ul.imgList { width:550px; margin:0 auto;}
	ul.imgList li { margin-top:10px; }
	.tool a{padding:0 10px;}

JavaScript

/**
 * 缩略图
 */
 function ArtZoom(options,callback){
	var self = this;
	self.options = $.extend({},defaults,options || {});
	self._init();
	self.callback = callback;
	this.cache = {
		minStep   :  0,
		maxStep   :  3
	};
 };
 $.extend(ArtZoom.prototype,{

	 // 初始化
	 _init: function(){
		var self = this,
			cfg = self.options;
		
		if($(cfg.targetCls).length <= 0) {
			return;
		}
		$(cfg.targetCls).each(function(){
			$(this).unbind('click').bind('click',function(e){
				e.preventDefault();
				var maxImage = $(this).attr('href');
				self._imgTool($(this),maxImage);
			});
		});
	 },
	 /*
	  * 点击小图变大图 先隐藏小图 再生成大图显示
	  * @param {$this,maxImage} 当前点击的元素 当前大图
	  */
	 _imgTool: function($this,maxImage) {
		var self = this,
			cfg = self.options;
		var width = 0,
            height = 0,
            maxWidth = $this.closest(cfg.parentCls).outerWidth();

		// 图片预先加载
        var loadImg = function (url, fn) {
            var img = new Image();
            img.src = url;
            if (img.complete) {
                fn.call(img);
            } else {
                img.onload = function () {
                    fn.call(img);
                };
            };
        };
		loadImg(maxImage, function () {
			width = this.width;
			height = this.height;
			tool();
		});
		function tool(){

			var $thisParent = $($this).closest(cfg.parentCls);
			// 当前图片隐藏掉
			$this.hide();
			if($('.artZoomBox',$thisParent).length > 0 && $('.artZoomBox',$thisParent).css('display') == "none"){
				$('.artZoomBox',$thisParent).show();
			}
			// 图片等比例缩放
			if (width > maxWidth) {
				height = maxWidth / width * height;
				width = maxWidth;
			};
			// 页面只创建一次
			if($('.artZoomBox',$thisParent).length <= 0) {
				var html = '<div class="artZoomBox">'+
					   '<div class="tool">'+
							'<a class="hideImg" href="#" title="收起">收起</a>'+
							'<a class="imgRight" href="#" title="向右转">向右转</a>'+
							'<a class="imgLeft" href="#" title="向左转">向左转</a>'+
							'<a class="viewImg" href="' +...