如何使用 jquery（不使用插件）创建一个简单的滑块？答案

【问题标题】：How to create an simple slider using jquery(not using plug in)?如何使用 jquery（不使用插件）创建一个简单的滑块？
【发布时间】：2015-06-25 16:50:12
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery loops animation image-gallery

【解决方案1】：

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

$.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;
}
}

http://plnkr.co/edit/bObWoQD8sGYTV2TEQ3r9

https://github.com/luckyape/lucky-carousel/blob/master/lucky-carousel.js

这里的代码已被改编为在没有插件架构的情况下使用： http://plnkr.co/edit/9dmfzcyEMtukAb4RAYO9

希望对你有帮助， g

【讨论】：

没关系，但是我想要jquery中的代码（不要使用插件）。
@RaghulRajendran 我已经用一个 plunker 更新了我的答案，该插件演示了在插件架构之外使用的代码。

【解决方案2】：

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);
};

    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);
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="~/JS/Ajaxcall.js"></script>
    <title>Index</title>
</head>
<body>
    <div style="background: rgb(255, 106, 0) none repeat scroll 0% 0%; padding: 80px;" id="slider_div">
        <div id="sub_div">
            <img src="~/Images/0.JPG" style="width: 100%; height: 452px;">
        </div>
    </div>
</body>
</html>

【讨论】：