From f74cfa1b2a16ce4f940a95ceb128f2ad45254f48 Mon Sep 17 00:00:00 2001
From: myzhoulang <604389771@qq.com>
Date: Sat, 27 May 2017 17:55:10 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8D=95=E8=AF=8D?=
=?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
dep/jmui/carousel/index.js | 292 ++++++++++++++++++-------------------
1 file changed, 146 insertions(+), 146 deletions(-)
diff --git a/dep/jmui/carousel/index.js b/dep/jmui/carousel/index.js
index ff71362..dd27b68 100644
--- a/dep/jmui/carousel/index.js
+++ b/dep/jmui/carousel/index.js
@@ -4,187 +4,187 @@
require('./index.scss');
angular.module('jmui.carousel', [])
.directive('jmCarousel', function(){
- return {
- restrict:'AE',
-
- scope:{
- interval:'@'
- },
-
- link: function(scope, element, attrs){
- var oNext = null;
- var oProvice = null;
- var oUl = element.find('.jm-carousel-inner');
- var oCarousel = element;
- var interval = scope.$eval(attrs.interval) || 5000;
- var oLists = element.find('.item');
- var currentIndex = 0;
- var preIndex = -1;
- var start = null;
- var timer = null;
- var timer2 = null;
- var indexs = [];
- var isAnimating = false;
-
- var isSupportTransition = !!window.TransitionEvent;
-
- var aIndexs = [];
- var endTime = 0;
- var carouselControl = [""];
-
- if(!element.attr('start')){
- setTimeout(init, 0);
- }else{
- var s = attrs.$observe("start", function(val){
- if(!!scope.$eval(val)){
- setTimeout(init, 0);
- s();
- }
- });
- }
-
- element.addClass('jm-carousel');
-
- function init(){
- var oIndexs;
-
- oLists = element.find('.item');
- if(oLists.length <= 1){
- return ;
+ return {
+ restrict:'AE',
+
+ scope:{
+ interval:'@'
+ },
+
+ link: function(scope, element, attrs){
+ var oNext = null;
+ var oProvice = null;
+ var oUl = element.find('.jm-carousel-inner');
+ var oCarousel = element;
+ var interval = scope.$eval(attrs.interval) || 5000;
+ var oLists = element.find('.item');
+ var currentIndex = 0;
+ var preIndex = -1;
+ var start = null;
+ var timer = null;
+ var timer2 = null;
+ var indexs = [];
+ var isAnimating = false;
+
+ var isSupportTransition = !!window.TransitionEvent;
+
+ var aIndexs = [];
+ var endTime = 0;
+ var carouselControl = [""];
+
+ if(!element.attr('start')){
+ setTimeout(init, 0);
+ }else{
+ var s = attrs.$observe("start", function(val){
+ if(!!scope.$eval(val)){
+ setTimeout(init, 0);
+ s();
+ }
+ });
}
- angular.forEach(oLists, function(value, index){
- var className = "index-item"+ (!index ? ' active':'');
- indexs.push("");
- });
+ element.addClass('jm-carousel');
- oIndexs = angular.element('').html(indexs.join(''));
+ function init(){
+ var oIndexs;
- oCarousel.append(oIndexs).append(carouselControl.join());
+ oLists = element.find('.item');
+ if(oLists.length <= 1){
+ return ;
+ }
+ angular.forEach(oLists, function(value, index){
+ var className = "index-item"+ (!index ? ' active':'');
+ indexs.push("");
+ });
- aIndexs = [].slice.apply(oIndexs.children());
+ oIndexs = angular.element('').html(indexs.join(''));
- oNext = element.find('.next');
- oProvice = element.find('.provice');
+ oCarousel.append(oIndexs).append(carouselControl.join());
- aIndexs.forEach(function(item, index){
- item.onclick = function(){
- if(index > currentIndex){
- setCurrent(index, true)
- }else{
- setCurrent(index, false)
- }
- // setCurrent(index, true)
- }
- });
- if(typeof oUl[0].addEventListener === "function"){
- oUl[0].addEventListener('transitionend', function(ev){
+ aIndexs = [].slice.apply(oIndexs.children());
- oLists.css('transition', 'none');
- isAnimating = false;
- endTime = new Date().getTime();
+ oNext = element.find('.next');
+ oProvice = element.find('.previous');
- oLists[preIndex].style.left = "100%";
- }, false);
- }
+ aIndexs.forEach(function(item, index){
+ item.onclick = function(){
+ if(index > currentIndex){
+ setCurrent(index, true)
+ }else{
+ setCurrent(index, false)
+ }
+ // setCurrent(index, true)
+ }
+ });
+ if(typeof oUl[0].addEventListener === "function"){
+ oUl[0].addEventListener('transitionend', function(ev){
- oNext.on('click', function(){
- setCurrent(currentIndex+1, true);
- });
+ oLists.css('transition', 'none');
+ isAnimating = false;
+ endTime = new Date().getTime();
- oProvice.on('click', function(ev){
- ev.stopPropagation();
- ev.preventDefault();
- setCurrent(currentIndex-1, false)
- });
+ oLists[preIndex].style.left = "100%";
+ }, false);
+ }
- oCarousel.on('mouseenter', function(){
- clearTimeout(timer2);
- });
- oCarousel.on('mouseleave', function(){
- autoPlay();
- });
+ oNext.on('click', function(){
+ setCurrent(currentIndex+1, true);
+ });
- setCurrent(0, true);
- autoPlay()
- }
+ oProvice.on('click', function(ev){
+ ev.stopPropagation();
+ ev.preventDefault();
+ setCurrent(currentIndex-1, false)
+ });
+ oCarousel.on('mouseenter', function(){
+ clearTimeout(timer2);
+ });
- function setCurrent(index, isNext){
+ oCarousel.on('mouseleave', function(){
+ autoPlay();
+ });
- clearTimeout(timer);
- if(isAnimating){
- return ;
- }
- if(preIndex === -1){
- angular.element(oLists[currentIndex]).addClass('active');
- oLists[currentIndex].style.left = "0";
- preIndex = currentIndex;
- currentIndex = index;
- return ;
+ setCurrent(0, true);
+ autoPlay()
}
- preIndex = currentIndex;
- currentIndex = index;
-
-
+ function setCurrent(index, isNext){
- if(isNext){
- if(currentIndex >= oLists.length){
- currentIndex = 0;
+ clearTimeout(timer);
+ if(isAnimating){
+ return ;
}
- oLists[currentIndex].style.left = "100%";
- } else{
- if(currentIndex === -1){
- currentIndex = oLists.length - 1
+ if(preIndex === -1){
+ angular.element(oLists[currentIndex]).addClass('active');
+ oLists[currentIndex].style.left = "0";
+ preIndex = currentIndex;
+ currentIndex = index;
+ return ;
}
- oLists[currentIndex].style.left = "-100%";
- }
- timer = setTimeout(function(){
- // 解决火狐浏览器 对使用JS操作CSS时渲染优化，
- // 可能会对上面left的赋值不会立即渲染。
- // 这样会导致之后的left的赋值执行的时候 之前的赋值就无效了。
- // 这里使用getComputedStyle 强制浏览器渲染。
- // 参考： https://www.web-tinker.com/article/20286.html
- if(angular.isFunction(window.getComputedStyle)){
- getComputedStyle(oLists[currentIndex]).left;
- }
+ preIndex = currentIndex;
+ currentIndex = index;
+
- angular.element(oLists[currentIndex]).addClass('active');
- angular.element(aIndexs[currentIndex]).addClass('active');
- oLists[preIndex].style.transition = "left .6s ease-in-out";
if(isNext){
- oLists[preIndex].style.left = "-100%";
+ if(currentIndex >= oLists.length){
+ currentIndex = 0;
+ }
+ oLists[currentIndex].style.left = "100%";
} else{
- oLists[preIndex].style.left = "100%";
+ if(currentIndex === -1){
+ currentIndex = oLists.length - 1
+ }
+ oLists[currentIndex].style.left = "-100%";
}
- oLists[currentIndex].style.transition = "left .6s ease-in-out";
- oLists[currentIndex].style.left = "0";
- angular.element(oLists[preIndex]).removeClass('active');
- angular.element(aIndexs[preIndex]).removeClass('active');
- if(isSupportTransition){
- isAnimating = true;
- }
- },30);
- }
+ timer = setTimeout(function(){
+ // 解决火狐浏览器 对使用JS操作CSS时渲染优化，
+ // 可能会对上面left的赋值不会立即渲染。
+ // 这样会导致之后的left的赋值执行的时候 之前的赋值就无效了。
+ // 这里使用getComputedStyle 强制浏览器渲染。
+ // 参考： https://www.web-tinker.com/article/20286.html
+ if(angular.isFunction(window.getComputedStyle)){
+ getComputedStyle(oLists[currentIndex]).left;
+ }
- function autoPlay(){
- clearTimeout(timer2);
- timer2 = setTimeout(function(){
- setCurrent(currentIndex+1, true);
- autoPlay()
- },interval)
+ angular.element(oLists[currentIndex]).addClass('active');
+ angular.element(aIndexs[currentIndex]).addClass('active');
+
+ oLists[preIndex].style.transition = "left .6s ease-in-out";
+ if(isNext){
+ oLists[preIndex].style.left = "-100%";
+ } else{
+ oLists[preIndex].style.left = "100%";
+ }
+
+ oLists[currentIndex].style.transition = "left .6s ease-in-out";
+ oLists[currentIndex].style.left = "0";
+
+ angular.element(oLists[preIndex]).removeClass('active');
+ angular.element(aIndexs[preIndex]).removeClass('active');
+ if(isSupportTransition){
+ isAnimating = true;
+ }
+ },30);
+ }
+
+ function autoPlay(){
+ clearTimeout(timer2);
+ timer2 = setTimeout(function(){
+ setCurrent(currentIndex+1, true);
+ autoPlay()
+ },interval)
+ }
}
}
- }
-});
+ });
From 5ff0a34e866d78b567f1528ece2d5d66dec93f60 Mon Sep 17 00:00:00 2001
From: myzhoulang <604389771@qq.com>
Date: Sat, 27 May 2017 18:45:52 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=8E=BB=E9=99=A4setTimeout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
dep/jmui/carousel/index.js | 51 +++++++++++++++++---------------------
1 file changed, 23 insertions(+), 28 deletions(-)
diff --git a/dep/jmui/carousel/index.js b/dep/jmui/carousel/index.js
index dd27b68..c715342 100644
--- a/dep/jmui/carousel/index.js
+++ b/dep/jmui/carousel/index.js
@@ -115,8 +115,6 @@ angular.module('jmui.carousel', [])
function setCurrent(index, isNext){
-
- clearTimeout(timer);
if(isAnimating){
return ;
}
@@ -146,36 +144,33 @@ angular.module('jmui.carousel', [])
oLists[currentIndex].style.left = "-100%";
}
+ // 解决火狐浏览器 对使用JS操作CSS时渲染优化，
+ // 可能会对上面left的赋值不会立即渲染。
+ // 这样会导致之后的left的赋值执行的时候 之前的赋值就无效了。
+ // 这里使用getComputedStyle 强制浏览器渲染。
+ // 参考： https://www.web-tinker.com/article/20286.html
+ if(angular.isFunction(window.getComputedStyle)){
+ getComputedStyle(oLists[currentIndex]).left;
+ }
- timer = setTimeout(function(){
- // 解决火狐浏览器 对使用JS操作CSS时渲染优化，
- // 可能会对上面left的赋值不会立即渲染。
- // 这样会导致之后的left的赋值执行的时候 之前的赋值就无效了。
- // 这里使用getComputedStyle 强制浏览器渲染。
- // 参考： https://www.web-tinker.com/article/20286.html
- if(angular.isFunction(window.getComputedStyle)){
- getComputedStyle(oLists[currentIndex]).left;
- }
+ angular.element(oLists[currentIndex]).addClass('active');
+ angular.element(aIndexs[currentIndex]).addClass('active');
- angular.element(oLists[currentIndex]).addClass('active');
- angular.element(aIndexs[currentIndex]).addClass('active');
-
- oLists[preIndex].style.transition = "left .6s ease-in-out";
- if(isNext){
- oLists[preIndex].style.left = "-100%";
- } else{
- oLists[preIndex].style.left = "100%";
- }
+ oLists[preIndex].style.transition = "left .6s ease-in-out";
+ if(isNext){
+ oLists[preIndex].style.left = "-100%";
+ } else{
+ oLists[preIndex].style.left = "100%";
+ }
- oLists[currentIndex].style.transition = "left .6s ease-in-out";
- oLists[currentIndex].style.left = "0";
+ oLists[currentIndex].style.transition = "left .6s ease-in-out";
+ oLists[currentIndex].style.left = "0";
- angular.element(oLists[preIndex]).removeClass('active');
- angular.element(aIndexs[preIndex]).removeClass('active');
- if(isSupportTransition){
- isAnimating = true;
- }
- },30);
+ angular.element(oLists[preIndex]).removeClass('active');
+ angular.element(aIndexs[preIndex]).removeClass('active');
+ if(isSupportTransition){
+ isAnimating = true;
+ }
}
function autoPlay(){