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

Question

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

javascriptjqueryloopsanimationimage-gallery

6

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

我在 jQuery 中使用了动画属性，但我希望循环连续显示这三张图片。

- Raghul Rajendran

2个回答

1

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>

- Selim Reza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- luckyape · Accepted Answer

我曾经创建过一个小的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