Javascript 此滑块未按预期工作

我在ember和Jquery中构建了一个自定义旋转木马。这几乎是直截了当的。单击“下一步”时，滑块将移动到下一个图像，单击“预览图像”时，滑块将返回到预览图像。那部分工作得很好。问题是当点击goToImage（又名Dots控制器）时，图像不会移动到相应的点顺序。看来我的逻辑可能有一些问题。

App.SliderComponent=Ember.Component.extend({
当前索引：0，
行动：{
运行滑块：函数（x）{
var currentIndex=this.get（'currentIndex'）；
var indexDiff=this.$（）.find（'.carousel ul li'）.index（）；
var carousel=this.$（）.find（'.carousel ul'），
slideWidth=carousel.find（'li'）.width（）；
console.log（indexDiff）；
如果（x==1）{
carousel.animate（{left:-slideWidth}，200，函数（）{
carousel.find（'li:first child'）。appendTo（carousel）；
carousel.css（'左'，''）；
});
}否则{
carousel.animate（{left:+slideWidth}，200，函数（）{
carousel.find（'li:last child'）.prependTo（carousel）；
carousel.css（'左'，''）；
});
}
}, 
下一页：函数（）{
this.send（'runSlider'，1）；
},
PreviewImage:函数（）{
this.send（'runSlider'，0）；
},
goToImage:函数（新索引）{
var currentIndex=this.get（'currentIndex'）
var indexDiff=newIndex-currentIndex；
var direction=（newIndex>currentIndex）？'nextImage'：'previewsImage'；
对于（变量i=0；i

您的

indexDiff

可能是负数。例如，如果新索引为0，当前索引为2。在这种情况下，代码中的

for

循环将不起作用。我猜更改

var indexDiff=newIndex-currentIndex

to

var indexDiff=Math.abs（newIndex-currentIndex）会有帮助。如果这没有帮助，我建议将
console.log（x）runSlider
操作的第一行中，查看是否调用了它以及传递了什么。
您的
indexDiff
可能是负数。例如，如果新索引为0，当前索引为2。在这种情况下，代码中的
for
循环将不起作用。我猜更改
var indexDiff=newIndex-currentIndex
to
var indexDiff=Math.abs（newIndex-currentIndex）会有帮助。如果这没有帮助，我建议将
console.log（x）
在
runSlider
操作的第一行，查看是否调用了它以及传递了什么。
是否正确维护了当前索引？它是从0开始还是从1开始？当indexDiff为负值时，您是否处理过该情况？您是否正确维护了当前索引？它是从0开始还是从1开始？indexDiff为阴性时，您处理过该案例吗？谢谢您。我从来没用过数学。abs…再次谢谢你谢谢你。我从来没用过数学。abs…再次感谢你
 <nav class="dots">
       <a href="#" class="carousel-bullet "{{action 'goToImage' 1}}></a>
       <a href="#" class="carousel-bullet"{{action 'goToImage' 2}}></a>
       <a href="#" class="carousel-bullet"{{action 'goToImage' 3}}></a>
    </nav>

    App.SliderComponent = Ember.Component.extend({
        currentIndex: 0,

        actions: {
            runSlider: function(x){
                 var currentIndex = this.get('currentIndex');
                var indexDiff = this.$().find('.carousel ul li').index();
                var carousel = this.$().find('.carousel ul'),
                    slideWidth = carousel.find('li').width();
                    console.log(indexDiff);
                if(x == 1){
                    carousel.animate({left: - slideWidth }, 200, function () {
                        carousel.find('li:first-child').appendTo(carousel);
                        carousel.css('left', '');
                    });
                }else{
                    carousel.animate({left: + slideWidth}, 200, function () {
                        carousel.find('li:last-child').prependTo(carousel);
                        carousel.css('left', '');
                    });
                }
            }, 
            nextImage: function(){
                this.send('runSlider', 1);
            },
           previewsImage: function(){
                this.send('runSlider',0);
            },
            goToImage: function(newIndex){
                var currentIndex = this.get('currentIndex')
                var indexDiff = newIndex - currentIndex;
                var direction = (newIndex > currentIndex) ? 'nextImage' : 'previewsImage';
                for (var i = 0; i < indexDiff; i++){
                    this.send(direction);
                }
            }
        }
    });