jquery - 图像 slider jQuery 中的动画错误

Question

我正在尝试在 jquery 中制作图像 slider 。我写了下面的代码。我无法理解如何为图像设置动画而不是更改 src 属性。

https://jsfiddle.net/2tsfnauk/2/

var tyInterval = setInterval(function() {

    $('#first').attr('src', $('#images li').eq(0).children().attr('src'))
    $('#head').html($('#images li').eq(0).children().attr('alt'))

    var iHtml = $('#images li').eq(0).remove();
    $('#images').append(iHtml);


}, 2000)

在页面的初始加载中，会显示一个空的 div。这是什么原因

Answer 1

如果您尝试以下代码会怎样？

$(document).ready(function() {
  var carousel= $('#carousel');
  var head= $('#head');

  // variable will be used to loop on all images
  var count = 1;
  // find all images inside the ul with id = images
  var max = $('#images img').length;
  // make sure that the ul is hidden
  $('#images').hide();
  var tyInterval = setInterval(function() {
    var html = $($('#images li').eq(count).html());
    carousel.append(html);
    head.text(html.attr('alt'))
    count = count +1;
    if(count==max) // when you reach the last image then reset the counter
        count=0;
  }, 2000)
  // to load for the first time
    var html = $('#images li').eq(0).html();
    carousel.append(html);
    head.text(html.attr('alt')
})

这里是您的 demo 的更新信息

希望这对你有帮助