Javascript 如何使用jquery（不使用插件）创建简单的滑块？ var img=函数（）{ $（“#滑块”）。动画（{“左”：“-=1775px”}，10000，函数（）{ $（“#滑块”）.animate（{“left”：“0px”}，10000）； img（）； }); }; img（）；

我在jquery中使用了动画属性，但我希望循环能够连续显示三幅图像。

我曾经创建了一个小的js插件来实现这一点，您可以在这里看到代码：

<script>
   var img = function(){
      $("#slider").animate({"left":"-=1775px"},10000,function(){
         $("#slider").animate({"left":"0px"},10000);
         img();
      });
   };
   img();
</script>

$.fn.luckyCarousel=函数（选项）{
var car=这个；
变量设置=$。扩展（{
“延迟”：8000，
“过渡”：400
}，选项）；
附加（$（''）.addClass（'nav'）；
var nav=$（'.nav'，car）；
var cnt=$（“ul”，汽车）；
var car_w=car.width（）；
var carItems=$（'li'，car）；
$（cnt）.宽度（（carItems.length*car_w）+car_w）；
$（carItems）。每个（函数（i）{
var dot_active=（！i）？“active”：“”；
$（导航）.prepend（$（''）.addClass（'dot-dot'+i+dot\u活动）.bind（'click'，函数（e）{
幻灯片（一）；
}));
});
$（carItems.css（'visibility'，'visible'）；
$（cnt.append（$（carItems.first（）.clone（））；
汽车附加（nav）；
var sel_i=0；
var spin=setInterval（函数（）{
幻灯片集（“自动”）
}，设置。延迟）；
函数幻灯片集（一）{
如果（i==“自动”）{
sel_i++；
i=选择i；
}否则{
净空间隔（旋转）
}
var position=$（cnt.position（）；
var t=车辆w*-i；
var last=false；
var d=t-位置。左侧；
如果（数学abs（t）=cnt.width（）-car\u w）{
选择i=i=0；
}
$（cnt）。设置动画({
左：'+='+d
}，settings.transition，function（）{
$（'.dot'，car.removeClass（'active'）；
$（'.dot'+i，car）.addClass（'active'）；
如果（！sel_i）{
$（cnt.css（'left'，'0'）；
}
});
sel_i=i；
}
}

代码已经过调整，可以在没有插件架构的情况下使用：

希望有帮助， g

var Slider=新函数（）{
var=这个；
变量递归=函数（n）{
setTimeout（函数（）{
控制台日志（n）；
$（'#sub#div img'）.attr（'src'，'/Images/'+n+'.JPG'）.addClass（'current'）；/n like 1.JPG，2.JPG…将图像存储到Images文件夹中。
如果（n！=0）
递归（n-1）；
其他的
递归（5）；
}, 3000);
};
var d=递归（5）；
};

指数
没问题，但是我想要jquery中的代码（不要使用插件）。@RaghulRajendran我已经用一个plunker更新了我的答案，它演示了在插件体系结构之外使用的代码。
$.fn.luckyCarousel = function(options) {
var car = this;
var settings = $.extend( {
  'delay'         : 8000,
  'transition' : 400
}, options);
car.append($('<div>').addClass('nav'));
var nav = $('.nav', car);
var cnt = $("ul", car);
var car_w = car.width();
var carItems = $('li', car);
$(cnt).width((carItems.length * car_w) + car_w);
$(carItems).each(function(i) {
    var dot_active = (!i) ? ' active' : '';
    $(nav).prepend($('<div>').addClass('dot dot' + i + dot_active).bind('click', function(e) {
        slideSel(i);
    }));
});
$(carItems).css('visibility', 'visible');
$(cnt).append($(carItems).first().clone());
car.append(nav);
var sel_i = 0;
var spin = setInterval(function() {
    slideSel('auto')
}, settings.delay);
function slideSel(i) {
    if (i == 'auto') {
        sel_i++;
        i = sel_i;
    } else {
        clearInterval(spin)
    }
    var position = $(cnt).position();
    var t = car_w * -i;
    var last = false;
    var d = t - position.left;
    if (Math.abs(t) == cnt.width() - car_w) {
        sel_i = i = 0;
    }
    $(cnt).animate({
        left: '+=' + d
    }, settings.transition, function() {
        $('.dot', car).removeClass('active');
        $('.dot' + i, car).addClass('active');
        if (!sel_i) {
            $(cnt).css('left', '0');
        }
    });
    sel_i = i;
}
}

var Slider = new function () {
    var that = this;
    var Recursion = function (n) {
        setTimeout(function () {
            console.log(n);
            $('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder.
            if (n != 0)
                Recursion(n - 1);
            else
                Recursion(5);
        }, 3000);
    };
    var d = Recursion(5);
};