Javascript jQuery图像幻灯片放映-最后一张未移动的幻灯片

我在jQuery中创建了一个简单的图像滑块，滑动效果很好，我尝试做两件事：

我想使用

transform:translate3d

来代替左边距（在滑动中）以使其平滑

第三张幻灯片完成后，第一张幻灯片放映时不带滑动动画（以抖动方式出现）

有人能告诉我这方面的想法吗

这是

“严格使用”；
$（文档）.ready（函数（）{
var winw=$（window.width（）；
var winh=$（window.height（）；
//变数
变量宽度=$（窗口）.width（）；
var时间框架=4000；
var=8000；
var currentSlide=1；
//缓存dom
变量$slider=$（“#slider”）；
变量$slideContainer=$（'.slides'，$slider）；
变量$slides=$（'.slide'，$slider）；
var区间；
//功能
函数startSlider（）{
间隔=设置间隔（函数（）{
//平移3d（x，y，z）
$slideContainer.animate({
“左边距”：“-=”+宽度
}，时间范围，功能（）{
如果（++currentSlide==$slides.length）{
currentSlide=1；
$slideContainer.css（'margin-left'，0）；
}
});
}（停顿）；
}
函数pauseSlider（）{
间隔时间；
}
//调用函数
//$slideContainer.on（'mouseenter'，pauseSlider）。on（'mouseleave'，startSlider）；
startSlider（）；
$（“#slider.slide”）。高度（winh）；
$（“#slider.slide”）.width（winw）；
});
html，
身体{
保证金：0；
填充：0；
字体系列：“开放式SAN”；
背景：#eee；
溢出：隐藏；
}
#滑块{
宽度：100%；
身高：100%；
溢出：隐藏；
}
#滑块，滑块{
显示：块；
宽度：10000px；
保证金：0；
填充：0；
}
#滑动，滑动{
浮动：左；
列表样式类型：无；
宽度：1050px；
}
.幻灯片1{
背景：url（imgs/slide-image-1.jpg）无重复中心；
}
.幻灯片2{
背景：url（imgs/slide-image-2.jpg）无重复中心；
}
.幻灯片3{
背景：url（imgs/slide-image-3.jpg）无重复中心；
}






您需要更新
开始滑动
功能，并需要使用
动画
更改
左边距

   function startSlider() {
        interval = setInterval(function() {
            //translate3d(x, y, z)
            $slideContainer.animate({'margin-left': '-='+width}, timeFrame, function() {
                if (++currentSlide === $slides.length) {
                     currentSlide = 1;
                     //$slideContainer.css('margin-left', 0);
                     $slideContainer.animate({'margin-left': '0'});
                }
            });
        }, pause);
    }

谢谢@Manoj的回答，但不幸的是，它没有按预期工作，我试图实现的是，当第三张也是最后一张幻灯片完成时，第一张幻灯片应该也会移动。继续继续滑动。。