Question

我正在尝试制作一个自定义滑块，因为我尝试过的滑块都不能满足我当前的需求; - ）

现在，我有一个简单的代码滚动元素，但我希望它是循环的，例如。当我点击最后一张幻灯片时，附加第一张幻灯片并将该幻灯片视为下一张幻灯片。

我的代码如下：

的JavaScript

    var cont = $('.newslider'),
        els = cont.children('.inner').children('img').length,
        width = cont.find('img').width(),
        total = els * width,
        margin = ($(window).outerWidth(true) - width)/2;


    cont.find('img').each(function() {
        $(this).css('float','left');
    });

    $(document).keydown(function(e) {
        if(e.which === 37) {
            cont.children('.inner').animate({
                "left": "-="+margin
            });
        } else if(e.which === 39) {
            cont.children('.inner').animate({
                "left": "+="+margin
            });
        }
    });

    cont.on('click', function() {
        $(this).children('.inner').animate({
            "left": "-="+margin
        });
    });

    cont.css({
        'width':$(window).outerWidth(true),
        'overflow':'hidden'
    });

    cont.children('.inner').css({
        'width':total,
        'position':'relative',
        'overflow':'hidden',
        'left':'-'+margin+'px'
    });

HTML

        <section class="newslider">
            <div class="inner">
                <img src="http://placehold.it/960x200">
                <img src="http://placehold.it/960x200">
                <img src="http://placehold.it/960x200">
                <img src="http://placehold.it/960x200">
                <img src="http://placehold.it/960x200">
                <img src="http://placehold.it/960x200">
            </div>
        </section>

小提琴：http://jsfiddle.net/u6sgoLfh/

感谢@Bojan Petrovski

更新了代码

小提琴：http://jsfiddle.net/5d7scejv/

        var parent = '.newslider';
        var element = 'div';

        var slideCount = $(parent).find(element).length,
            slideWidth = $(parent).find(element).width(),
            sliderWidth = slideCount * slideWidth;

        var wind = $(window).outerWidth(true),
            slider = 960,
            margin = ((parseInt(wind) - parseInt(slider))/2);


        $(parent).css({ width: slideWidth, left: -margin*4 });
        $(parent).children('.inner').css({ 'width': sliderWidth, 'margin':'0 '+margin+'px'});
        $(parent).children('.inner').find(element+':last-child').prependTo(parent +' .inner');
        $(parent).children('.inner').find(element+':first-child').appendTo(parent +' .inner');

        function hightlightSlide() {
            $(parent).children('.inner').find(element).each(function(){
                //console.log($(this).offset().left+'  --  '+$(this).attr('data-id')+' --- '+margin/3);
                $(this).removeClass('active-slide');
                if(margin/3 === $(this).offset().left) {
                    $(this).addClass('active-slide');
                }
            });
        };

        function moveLeft() {
            $(parent).children('.inner').stop().animate({
                left: + slideWidth/2
            }, 500, function () {
                $(parent).children('.inner').find(element+':last-child').prependTo(parent +' .inner');
                $(parent).children('.inner').css('left', '');
                hightlightSlide();
            });
        };

        function moveRight() {
            $(parent).children('.inner').stop().animate({
                left: - slideWidth/2
            }, 500, function () {
                $(parent).children('.inner').find(element+':first-child').appendTo(parent +' .inner');
                $(parent).children('.inner').css('left', '');
                hightlightSlide();
            });
        };        


        $(parent).find(element).each(function() {
            $(this).css('float','left');
        });

        $(document).keydown(function(e) {
            if(e.which === 37) {
                 moveLeft();
            } else if(e.which === 39) {
                moveRight();
            }
        });

        $(parent).css({
            'width':$(window).outerWidth(true),
            'overflow':'hidden'
        });

        $(parent).children('.inner').css({
            'width':sliderWidth,
            'position':'relative',
            'overflow':'hidden'
        });

Answer 1

这是一个简单的解决方案http://jsfiddle.net/u6sgoLfh/6/，用于无限滑块

var slideCount = $('.newslider .inner img').length;
var slideWidth = $('.newslider .inner img').width();
var slideHeight = $('.newslider .inner img').height();
var sliderWidth = slideCount * slideWidth;
var margin = ($(window).outerWidth(true) - slideWidth)/2;

$('.newslider').css({ width: slideWidth, height: slideHeight });

$('.newslider .inner').css({ width: sliderWidth, marginLeft: - slideWidth });

$('.newslider .inner img:last-child').prependTo('.newslider .inner');

function moveLeft() {
    $('.newslider .inner').animate({
        left: + slideWidth
    }, 200, function () {
        $('.newslider .inner img:last-child').prependTo('.newslider .inner');
        $('.newslider .inner').css('left', '');
    });
};

function moveRight() {
    $('.newslider .inner').animate({
        left: - slideWidth
    }, 200, function () {
        $('.newslider .inner img:first-child').appendTo('.newslider .inner');
        $('.newslider .inner').css('left', '');
    });
};        


    $('.newslider').find('img').each(function() {
        $(this).css('float','left');
    });

    $(document).keydown(function(e) {
        if(e.which === 37) {
             moveLeft();
        } else if(e.which === 39) {
            moveRight()
        }
    });

    $('.newslider').on('click', function() {
         moveLeft();
    });

    $('.newslider').css({
        'width':$(window).outerWidth(true),
        'overflow':'hidden'
    });

    $('.newslider').children('.inner').css({
        'width':sliderWidth,
        'position':'relative',
        'overflow':'hidden',
        'left':'-'+margin+'px'
    });

如何在jQuery中模拟无限数量的元素

1 个答案: