javascript - 从头开始制作 jquery 轮播

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 slider 条目的总数是

谢谢

Answer 1

您对 total_entries 变量有疑问。首先你需要在前面有一个“var”，来定义它是一个新变量。其次，你忘记了一个“。” (点)在您的 HTML 代码中搜索类。

你的第一行应该是:

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

希望它有用;-)