Question

我正在创建一个简单的滑块，每张幻灯片上有图片和段落（）。我在创建新div时遇到问题。我尝试了所有的东西，但是现在使用仅图像滑块的东西不起作用（滑块根本不会滑动，甚至没有创建新的div）。任何人都可以为可能导致此错误的事件带来光明吗？我有以下代码：

var slide = function () {

    if (number_of_image <= 1) number_of_image++;
    else number_of_image = 0;

    $('div.slider:first-of-type').after("<div class='slider'><img src='" + images[number_of_image] + "' alt='" + alts[number_of_image] + "' /></div>");

    var windowWidth = $(window).width();

    $('div.slider:last-of-type').css({
        'display': 'inline-block',
            'position': 'absolute',
            'top': $('div.slider:first-of-type').position().top + 'px',
            'left': windowWidth + 'px'
    });
    $('div.slider:first-of-type').animate({
        left: '-' + windowWidth + 'px'
    }, {
        duration: 2000,
        queue: false,
        complete: function () {
            $('div.slider:first-of-type').remove();
        }
    });
    $('div.slider:last-of-type').animate({
        left: 0
    }, {
        duration: 2000,
        queue: false
    });
}


var time = 10000;

var tick = function () {
    time -= 100;
    if (time <= 0) {
        slide();
        time = 10000;
    }
}

setInterval(tick, 100);

编辑：我有一个错误＆＃34;未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义＆＃34; 在以下行：

'top': $('div.slider:first-of-type').position().top + 'px',

Answer 1

错误说明从该行代码中的位置返回的内容是undefined，其中没有属性top。

仅当位置无法计算元素的位置时才会发生这种情况。我尝试了你的代码并且首先得到了你的错误然后我确保将<div class="slider"></div>元素添加到页面然后它工作了。看看这个小提琴： http://jsfiddle.net/9rDAm/2/ ，它使用您发布的代码并稍作修改。您应该看到页面上position()可以计算的元素可以解决问题。还要确保元素不被隐藏。

以下位取自.position()的jquery文档：http://api.jquery.com/position/

注意：jQuery不支持获取位置坐标隐藏元素或考虑边框，边距或填充设置身体元素。

将div添加到滑块

1 个答案: