Question

网上的大多数轮播示例都是水平的，所以我正在创作我的我已经遇到了障碍，我不知道如何阻止旋转木马滚动下来，当它到达终点这里是我的代码

 <script type="text/javascript">
        $(document).ready(function(){
            //Define the animation speed for the Carousel
            var speed = 600;
            var x =1;
            var number = $('li').size();
            var height = $('li').height();
            var total_height = number * height;

            $('#navPrev').click(function(){


                x=x+200;
                $('#carousel ul').animate({marginTop:x}, speed);
            });
            $('#navNext').click(function(){

                x= x -200;


                $('#carousel ul').animate({marginTop:x}, speed);
            });
        });
    </script> 
    <style type="text/css">
        #container {height:500px; width:400px; font-family:Tahoma;}
        #carousel { height:500px; width:400px; border:1px solid #000;
                    overflow:hidden;}
        #carousel ul { list-style-type:none;margin-top:4px; width:300px; margin-left:0; left:0; padding-left:1px;}
        #carousel li { display:inline;}
        #carousel ul li img{ width:400px; height:90px; border:1px solid #ccc;
                             float:left; }
        #navPrev {float:left;}
        #navNext {float:right;}
    </style>
  <div id="container">
        <div id="carousel">

            <ul>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li><li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/loading.gif" width="800px" /></li>

            </ul>
        </div>
        <a id="navPrev" href="#">Previous</a>
        <a id="navNext" href="#">Next</a>
    </div>

当我到达列表底部或顶部时，我需要制作此代码以使旋转木马停止如何实现此目的？

Answer 1

在为轮播容器设置动画之前，请检查是否还有其他元素要设置动画：

变化：

$('#navPrev').click(function(){
    x=x+200;
    $('#carousel ul').animate({marginTop:x}, speed);
});

要：

$('#navPrev').click(function(){
    //this will check if the total height of the carousel is greater than if you increment the `x` variable by another 200
    if (1 >= (x+200)) {
        x=x+200;
        $('#carousel ul').animate({marginTop:x}, speed);
    }
});

Answer 2

将x值从1限制为div容器高度与ul-li容器高度

之间的差值

//定义Carousel的动画速度

var speed = 600;
var x = 1;
var number = $('li').size();
var height = $('img').height();
var total_height = number * height;
var diff = $('#carousel').height() - $('#carousel ul').height();
$('#navPrev').click(function() {

    if (x < 1) {
        x = x + 200;
        $('#carousel ul').animate({
            marginTop: x
        }, speed);
    }
});
$('#navNext').click(function() {
    if (x > diff) {
        x = x - 200;
        $('#carousel ul').animate({
            marginTop: x
        }, speed);
    }
});

vertical carousel example

垂直旋转木马与jquery

2 个答案: