如何动画css绑定

Question

我有这个约束力：

data-bind="css: imageClass"

视图模型：

imageClass: ko.observable("bg-image0")

的CSS：

.bg-image0 {background-image:url(/content/images/image0.jpg)

.bg-image1 {background-image:url(/content/images/image1.jpg)

.bg-image2 {background-image:url(/content/images/image2.jpg)

我希望课程每3秒更换一次，所以它会显示图像0,1,2,0,1,2等。

我该怎么做？

Answer 1

需要一个带有变量的简单计时器来更新observable：

var counter = 0;
setInterval(function() {
    counter++;
    if (counter === 3)
        counter = 0;
    //assume your viewmodel is "vm":
    vm.imageClass('bg-image' + counter);
}, 3000);