Question

我知道这里有很多关于jquery图像轮播的问题，但它们都引用了一个插件。我想从头做一个。这是一个非常简单的，有2个按钮，一个左，一个右。当您单击左按钮时，包含所有图像的整个容器的位置向左移动，右侧使其向右移动。

这就是我到目前为止......现在问题只是左键有效。（右侧按钮仅在您将图像向左滑动一次后才起作用）并且我还希望它在所有图像上设置动画，并在到达图像集的末尾时转到最后一个图像

JS：

total_entries = $("image-entry").length;
var current_index = 0;
var slider_entries = $('#slider-entries');

$('#home-slider #left').click(function(){
    go_to_index(current_index-1);
    return false;
});

$('#home-slider #right').click(function(){
    go_to_index(current_index+1);
    return false;
});



var go_to_index = function(index){
    if(index < 0)
        index = total_entries - 1;
    if(index > total_entries - 1)
        index = 0;
    if(current_index == index)
        return;



    var left_offset = -1 * index * 720;
    slider_entries.stop().animate({"left": left_offset}, 250);
    //description_container.stop().animate({"left":left_offset}, 250);
    current_index = index;
};

HTML：

<div id="slider">
    <div id="slider-entries">
        <div class="image-entry">
            <img src="http://placekitten.com/720/230" />
        </div>
        <div class="image-entry">
            <img src="http://placedog.com/720/230" />
        </div>
        <div class="image-entry">
            <img src="http://placedog.com/720/230" />
        </div>
    </div>
</div>

每张图片的总宽度为720px 滑块条目的总数为

由于

Answer 1

你的total_entries变量有问题。首先，你需要一个“var”，以定义它是一个新的变量。其次，你忘了“。” （点）在HTML代码中搜索类..

你的第一行应该是：

var total_entries = $(".image-entry").length;

希望它有效; - ）

从头开始制作jquery旋转木马

1 个答案: