3

我有此图像滑块代码和下一个上一个并自动更改图像功能

scope.next = function () {
    scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
};

scope.prev = function () {
    scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.images.length - 1;
};

scope.$watch('currentIndex', function () {
    scope.images.forEach(function (image) {
    image.visible = false;
    });

    scope.images[scope.currentIndex].visible = true;
});

var timer;
var sliderFunc = function () {
    timer = $timeout(function () {
        scope.next();
        timer = $timeout(sliderFunc, 5000);
    }, 5000);
};

sliderFunc();

scope.$on('$destroy', function () {
    $timeout.cancel(timer);
});

在滑块模板中，我有下一个和上一个功能的箭头链接

  <div class="arrows">
    <a href="#" ng-click="prev()">
      <img src="tasavir/omgh/left-arrow.png" />
    </a>
    <a href="#" ng-click="next()">
      <img src="tasavir/omgh/right-arrow.png" />
    </a>
  </div>

我只想在用户单击下一个或上一个 btn 时添加清除 $timeout 功能，并且每次用户单击下一个或上一个 btn 时，计时器都会清除并在 5 秒后更改图像。

这是关于图像滑块的完整文档

我为此创建了 JSFiddle请看这个

4

3 回答 3

3

这是我的第三次尝试：https ://jsfiddle.net/koljada/8cLw6wch/22/

         var timer = $interval(function () {
                 scope.changeImage();
         }, 5000);             
         scope.next = function () {                 
                $interval.cancel(timer);
                timer = $interval(function () {
                 scope.changeImage();
                }, 5000);                 
         };
     scope.changeImage = function () {                
             scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
         };

希望这对您有所帮助。

于 2015-08-13T14:35:55.863 回答
2

嗨@Roman 和@Pankaj 坦克提供了巨大的帮助......用这段代码修复：

     scope.next = function () {                 
            $interval.cancel(timer);
            scope.changeImage(); // just add this line
            timer = $interval(function () {
             scope.changeImage();
            }, 5000);                 
     };

在这个版本的@Roman 中编辑。

最终版本

坦克斯的家伙...

于 2015-08-14T08:45:54.963 回答
2

您可以$scope.next通过检查标志来设置函数超时。

标记

<div class="arrows">
    <a href="#" ng-click="prev()">
      <img src="tasavir/omgh/left-arrow.png" />
    </a>
    <a href="#" ng-click="next(true)">
      <img src="tasavir/omgh/right-arrow.png" />
    </a>
</div>

代码

var timer;
var sliderFunc = function () {
    timer = $timeout(function () {
        scope.next(false);
    }, 5000);
};

scope.next = function(setTimeoutToNext){
    scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
    if(setTimeoutToNext)
      $timeout.cancel(timer); //here it will clear the timeout
}

工作小提琴

于 2015-08-13T07:37:28.353 回答