1

我有一个旋转木马，无论你向左还是向右，它都能很好地工作。但我希望它循环而不是停止一种方式。如果单击右手箭头，我已经让它循环正常。但是左手好像练不出来。

脚本：

  $('.carousel-next-page').click(function () {
        var carousel = $(this).parents('.carousel').find('ul');
        var scroll = carousel.scrollLeft();
        var w = carousel.width();
        var x = 0;
        carousel.find('li').each(function (i) {
            if ($(this).position().left < w) {
                x = $(this).position().left;
            }
            if ($(this).position().left < 0) {
                carousel.animate({ scrollLeft: 0 }, 'fast');
                return false;
            }
           // alert("this position = " + $(this).position().left + ", Width = "+ w + ", x = " + x)
        });
        carousel.animate({ scrollLeft: scroll + x }, 'fast');
        return false;
    });
    $('.carousel-prev-page').click(function () {
        var carousel = $(this).parents('.carousel').find('ul');
        var scroll = carousel.scrollLeft();
        var w = carousel.width();
        var x = 0;
        carousel.find('li').each(function (i) {
            if ($(this).position().left < 1 - w)
            {
                x = $(this).position().left;
            }

            //if ($(this).position().left > 0) {
            //    carousel.animate({ scrollLeft: carousel.find('li:last').position().left }, 'fast');
            //    return ;
            //}               

        });
        if (x == 0) {
            carousel.animate({ scrollLeft: 0 }, 'fast');
        } else {
            carousel.animate({ scrollLeft: scroll + x }, 'fast');
        }
        return false;
    });

HTML：

<div class="carousel">        
       <div class="float-left" style="margin-top:25px;">                
            <a href="#" class="carousel-prev-page"><span><img src="/gfx/smallLeftArrow.png" alt=""></span></a>
       </div>
       <ul>
                <li>
                    <img src="/slideshow/a8902970-b083-4bc7-a05d-eb296771ffd0.png">
                </li>
                <li>
                    <img src="/slideshow/59af2104-c73d-4f1f-91c6-476c1da47420.png">
                </li>                    

                <li>
                    <img src="/slideshow/f225100a-d8bf-4dc9-b552-01db65c110b3.png">
                </li>
                <li>
                    <img src="/slideshow/7efbf5d5-fcdd-4127-b8cf-5a36d5a507a8.png">
                </li>
                <li>
                    <img src="/slideshow/b1b9184f-aaed-4658-9fbe-5fc3b86975d1.png">
                </li>
                <li>
                    <img src="/slideshow/a3b493b5-6302-44f8-83e0-2a3a060013e6.png">
                </li>
                <li>
                    <img src="/slideshow/cac1b555-e155-48d8-960f-00d25eaf2dde.png">
                </li>
       </ul>
        <div class="float-left" style="margin-top:25px;">              
              <a href="#" class="carousel-next-page"><span><img src="/gfx/smallRightArrow.png" alt=""></span></a>
       </div>
</div>

CSS：

.carousel ul { overflow:hidden; white-space:nowrap; margin:0; padding:0; list-style:none; position:relative; width:700px; float:left; }

.carousel li { display:inline-block; }   

.carousel-prev-image, .carousel-next-image, .carousel-prev-page, .carousel-next-page
{
    width: 15px;
    height: 25px;
}

.carousel-prev-image, .carousel-prev-page
{
    margin-left:15px;
    margin-right:5px;
}

.carousel-next-image, .carousel-next-page
{
    margin-right:15px;
}
4

3 回答 3

0

您可以做的是首先将您的下一个和上一个方法放入它们自己的函数中：

function nextSlide() { ... }
function prevSlide() { ... }

编辑：起初我以为你想让它们自动循环。这第一步实际上不是必需的，但会使函数易于重用。

...然后给每个.carousel元素一个data-*属性和循环基于：

var slideNumber = 1;

// Loop through each carousel 'slide' adding a data-slide attribute
$('.carousel ul li').each(function() {
    $(this).attr('data-slide', slideNumber++);
})

...设置当前的“初始”幻灯片：

var currentSlide = 1;

...然后在您更改幻灯片的函数中，确定下一张和上一张幻灯片（其中 slideNumber 现在是幻灯片的总数（轮播中的列表项目））：

var nextSlide = (currentSlide + 1) >= slideNumber ? 1 : currentSlide + 1;
var prevSlide = (currentSlide - 1) < 1 ? slideNumber - 1 : currentSlide - 1;

...然后设置下一个或上一个列表项的位置（取决于您希望滑块循环的方式）：

$('.carousel ul li[data-slide="' + nextSlide + '"]').css({left:'100%'});
$('.carousel ul li[data-slide="' + prevSlide + '"]').css({left:'-100%'});

...然后通过单击时调用函数来进行幻灯片更改。

让我为此制作一个 JSFiddle。

编辑：这是 JSFiddle 示例。您需要防止在动画完成之前单击上一个和下一个按钮，以防止它中断。

于 2013-02-13T12:37:01.357 回答
0

它基本上在内联div上运行

HTML

<div class="wrapper">
<div class="slide_container"><div class="slide">4</div><div class="slide">5</div><div  class="slide">6</div><div class="slide">1</div><div class="slide">2</div><div class="slide">3</div></div></div>
<button id="left">Left</button>
<button id="right">Right</button>

CSS

.wrapper{height:60px;width:200px;border:gray solid 10px;background:#ccc;overflow:hidden}
.slide_container{margin-left:-600px;height:60px;width:4000px}
.slide{background:#aaa;height:60px;width:200px;display:inline-block;}

JS

var slider = function(dir){
if(dir==1){
    $('.slide_container .slide:first').animate({'width':0},200,function(){$(this).appendTo($('.slide_container')).removeAttr('style');});

}else if(dir==-1){
    $('.slide_container .slide:last').css('width',0).prependTo($('.slide_container ')).animate({'width':200},200,function(){$(this).removeAttr('style');});
}
}

$('#left').click(function(){slider(1)});
$('#right').click(function(){slider(-1)});
于 2013-02-19T19:34:44.050 回答
0

我解决了！

     $('.carousel-prev-page').click(function () {
        var carousel = $(this).parents('.carousel').find('ul');
        var scroll = carousel.scrollLeft();
        var w = carousel.width();
        var x = 0;
        var beggining = false;
        carousel.find('li').each(function (i) {
            if ($(this).position().left < 1 - w)
            {
                x = $(this).position().left;
            }         
            if ($(this).position().left == 0)
            {
                beggining = true;
            }
        });
        //alert(x);
        if (beggining) {
            carousel.animate({ scrollLeft: carousel.find('li:last').position().left }, 'fast');
            return false;
        }
        else if (x == 0) {
            carousel.animate({ scrollLeft: 0 }, 'fast');
        } else {
            carousel.animate({ scrollLeft: scroll + x }, 'fast');
        }
        return false;
    });
于 2013-02-20T09:19:57.400 回答