Question

我正在制作一个使用JSON填充的jQuery轮播。我需要它在最后停止。我通过将列表项的数量乘以列表项的宽度来计算列表的宽度，因此可以添加新项而不更改CSS中的宽度。这是我的代码

slider.js

$(document).ready(function() {
var w = $("#carouselList").css("width");

var slider = $("#carouselList");
var leftProperty, newLeftProperty;


$("#rightButton").click(function(){
    leftProperty = parseInt(slider.css("left"));

    if (leftProperty - 991 <= -w) {
        newLeftProperty = 0;

        }
    else {
        newLeftProperty = leftProperty - 304;

         }



    slider.animate({left: newLeftProperty}, 500);

    });

$("#leftButton").click(function(){
    leftProperty = parseInt(slider.css("left"));

    if (leftProperty < 0){
        newLeftProperty = leftProperty + 304;


    }

    else {
        newLeftProperty = 0;
    }

    slider.animate({left: newLeftProperty}, 500);
});
});

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<div id="carousel">
<h2>Recommended for You</h2>
<div id="leftButton" class="buttonPanel"></div>
<div id="display">
<ul id="carouselList">

</ul>
</div><!--display-->
<div id="rightButton" class="buttonPanel"></div>
<div class="clear"></div>
</div><!--carousel-->

<script>
$.getJSON('jsonData.json', function(data){
    var items=[];
    $.each(data, function(key, val){
        items.push(val);
        $("#carouselList").append(items[2]);
        var c =$("#carouselList li").size();
        $("#carouselList").css("width", c*250);
    });
});


</script>
</body>
</html>

jQuery Carousel在结束时停止

0 个答案: