그림 윤방-고효율 버전

전문적인 전단(웃음)으로서 사진 윤방 플러그인은 실현하기 쉬운 기능 플러그인이어야 한다
경계가 높아짐에 따라, 우리는 플러그인을 작성하는 데 점점 효율을 중시한다.그래서 업무 관계를 감안하여 저는 타오바오의 플러그인 디자인을 본떠서 개인적으로 비교적 만족스러운 사진 윤방 플러그인을 썼습니다(타오바오의 플러그인은 버그가 있습니다!)
이 플러그인은angular의directive에 기반을 두고 있음을 미리 설명합니다. (다른 컴파일 형식으로 바꾸기)
특징:

translateX+transition 제작 애니메이션(css3 처리 애니메이션의 속도가 비교적 높음)

이벤트 에이전트

문자열 형식 생성 DOM

streamModule.directive('picscroll', function() {
    return {
        restrict: 'E',
        scope: {
        	list: "=",
        	space: '@'
        },
        template: [
        	'<div class="picscroll-con">',
			'	<div class="outer-con">',
			'		<div class="inner-con">',
			// '			<div class="page" ng-repeat="url in list"><img src="{{url}}"></div>',
			'		</div>',
			'	</div>',
			'	<ul class="points">',
			// '		<li ng-class="{\'curLi\': cuIndex == $index}" ng-repeat="url in list"></li>',
			'	</ul>',
			'</div>'
        ].join(''),
        link: function(scope, elem, attr) {
        	var contain = elem.find('.inner-con');
        	var points = elem.find('.points');
        	var width = 0;
        	var space = Number(scope.space) || 500;
        	var tmpl = {
        		page: '<div class="page"><img src="{url}"></div>',
        		point: '<li index="{index}"></li>',
        	};
        	//       
        	contain.css('transition', 'transform ' + space / 1000.0 + 's ease');
        	contain.css('position', 'relative');
        	points.bind('click', function(event) {
        		var tar = event.target || {};
        		if(tar.nodeName.toUpperCase() != 'LI')
        			return ;
        		jump(tar.getAttribute('index'));
        	});

        	//      （                 ）
        	init();
			function init() {
				var html1 = tmpl.page.replace('{url}', scope.list[scope.list.length - 1]);
				var html2 = '';
				width = elem.find('.outer-con').width();
				for (var i = 0; i < scope.list.length; i++) {
					html1 += tmpl.page.replace('{url}', scope.list[i]);
					html2 += tmpl.point.replace('{index}', i);
				};
				html1 += tmpl.page.replace('{url}', scope.list[0]);
				contain.html(html1);
				points.html(html2);
				jump(0);
			}
			//        
			var curIndex = 0;
			var movebase = 0;
			function jump(index) {
				index = Number(index);
				movebase = movebase || 0;
				//   
				var children = points.children();
				var len = children.length;
				children.eq(curIndex).removeClass('curLi');
				children.eq(index).addClass('curLi');
				//     
				if (index == len - 1 && curIndex == 0) {
					//         
					contain.css('transform', 'translateX(' + -movebase + 'px)');
					setTimeout(function() {
						movebase = -width * len + movebase;
						contain.css('left', movebase + 'px');
					}, space);
				} else if (index == 0 && curIndex == len - 1) {
					//         
					contain.css('transform', 'translateX(' + (-width * (len + 1) - movebase) + 'px)');
					setTimeout(function() {
						movebase = width * len + movebase;
						contain.css('left', movebase + 'px');
					}, space);
				} else {
					contain.css('transform', 'translateX(' + (-width * (index + 1) - movebase) + 'px)');
				}
				//   
				curIndex = index;
			}
			/**********************
			 **********************
			 *           ，         
			 * transition  translate   ，translate   （  ），left   （  ）
			 *          ，   
			 *  first->last  last->first，       ，   left         
			 *      movebase
			 * movebase       
			 *   ( ) len  ，    
			 *********************
			 **********************/
        }
    };
});

사실 코드 기능은 아직 실현되지 않았다. 예를 들어 자동 윤방 등은 나중에 보충한다