Question

嗨，所以目前这个设置是这样的，当你点击＆＃34; next＆＃34;它顺着1项。如何改变这一点，以便它在整个行中正确，即当你点击“下一步”时。你会看到数字7-14？

谢谢。

HTML

<a href="javascript:void(0);" class="btnPrevious">Previous</a>
    <a href="javascript:void(0);" class="btnNext">Next</a>
    <div class="carousel">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
        </ul>
    </div>

CSS

.carousel{
            padding-top: 20px;
            width: 357px;
            overflow: hidden;
            height: 50px;
            position: relative;
        }.carousel ul{
            position: relative;
            list-style: none;
            list-style-type: none;
            margin: 0;
            height: 50px;
            padding: 0;
        }.carousel ul li{
            position: absolute;
            height: 25px;
            width: 50px;
            float: left;
            margin-right: 1px;
            background: #f2f2f2;
            text-align: center;
            padding-top: 25px;
        }

JS

$(function(){
            var carousel = $('.carousel ul');
            var carouselChild = carousel.find('li');
            var clickCount = 0;
            var canClick = true;

            itemWidth = carousel.find('li:first').width()+1; //Including margin

            //Set Carousel width so it won't wrap
            carousel.width(itemWidth*carouselChild.length);

            //Place the child elements to their original locations.
            refreshChildPosition();

            //Set the event handlers for buttons.
            $('.btnNext').click(function(){
                if(canClick){
                    canClick = false;
                    clickCount++;

                    //Animate the slider to left as item width 
                    carousel.stop(false, true).animate({
                        left : '-='+itemWidth
                    },600, function(){
                        //Find the first item and append it as the last item.
                        lastItem = carousel.find('li:first');
                        lastItem.remove().appendTo(carousel);
                        lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
                        canClick = true;
                    });
                }
            });

            $('.btnPrevious').click(function(){
                if(canClick){
                    canClick = false;
                    clickCount--;
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:last');
                    lastItem.remove().prependTo(carousel);

                    lastItem.css('left', itemWidth*clickCount);             
                    //Animate the slider to right as item width 
                    carousel.finish(true).animate({
                        left: '+='+itemWidth
                    },300, function(){
                        canClick = true;
                    });
                }
            });

            function refreshChildPosition(){
                carouselChild.each(function(){
                    $(this).css('left', itemWidth*carouselChild.index($(this)));
                });
            }
        });

Answer 1

如果你知道想要移动轮播的确切数字，只需在$（＆＃39; .btnPrevious＆＃39;）中更改以下两行。点击（function（）和$（＆＃39;。 btnNext＆＃39;）点击（函数（）{：

left : '-='+itemWidth

到

left : '-='+itemWidth*numberToMoveWith

和

left: '+='+itemWidth

到

left: '+='+itemWidth*numberToMoveWith

如果没有，则必须计算可见元素的数量，例如：

  function numberOfElements() {
            var carWidth=carousel.parent().width();
            var elemWidth=carouselChild.width();
            return Math.floor(carWidth/elemWidth);
        }

以下是您应该使用的完整javascript代码，此处已经更正了无限滚动错误：

$(function(){
        var carousel = $('.carousel ul');
        var carouselChild = carousel.find('li');
        var clickCount = 0;
        var canClick = true;

        function numberOfElements() {
            var carWidth=carousel.parent().width();
            var elemWidth=carouselChild.width();
            return Math.floor(carWidth/elemWidth);
        }

        var moveWith=numberOfElements();

        itemWidth = carousel.find('li:first').width()+1; //Including margin

        //Set Carousel width so it won't wrap
        carousel.width(itemWidth*carouselChild.length);

        //Place the child elements to their original locations.
        refreshChildPosition();



        //Set the event handlers for buttons.
        $('.btnNext').click(function(){
            if(canClick){
                canClick = false;

                //Animate the slider to left as item width 
                carousel.stop(false, true).animate({
                    left : '-='+itemWidth*moveWith
                },600, function(){
                    //Find the first item and append it as the last item.
                    for (var i=0; i<moveWith; i++) {
                        clickCount++;
                        lastItem = carousel.find('li:first');
                        lastItem.remove().appendTo(carousel);
                        lastItem.css('left', (((carouselChild.length-1+clickCount)*(itemWidth))));
                    }
                    canClick = true;
                });
            }
        });

        $('.btnPrevious').click(function(){
            if(canClick){
                canClick = false;
                //Find the first item and append it as the last item.
                for (var i=0; i<moveWith; i++) {
                clickCount--;
                lastItem = carousel.find('li:last');
                lastItem.remove().prependTo(carousel);
                lastItem.css('left', itemWidth*clickCount);
                }
                //Animate the slider to right as item width 
                carousel.finish(true).animate({
                    left: '+='+itemWidth*numberOfElements()
                },300, function(){
                    canClick = true;
                });
            }
        });

        function refreshChildPosition(){
            carouselChild.each(function(){
                $(this).css('left', itemWidth*carouselChild.index($(this)));
            });
        }
    });

更新了JSFiddle：http://jsfiddle.net/9vgr3xqa/2/

如何让旋转木马成行而不是一个接一个地移动？

1 个答案: