Question

我正在尝试在jquery中执行图像滑块。我写了下面的代码。我无法理解如何动画图像而不是更改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

的更新

希望这会对你有所帮助

Answer 2

您应该使用fadeOut()和fadeIn()。

就像在这段代码中一样：

$(function() {
    $('#images li:gt(0)').hide();
    setInterval(function() {
        $('#images > :first-child').fadeOut().next('li').fadeIn().end().appendTo('#images');
        $('#head').html($('#images li').eq(0).children().attr('alt'));
    }, 3000);
});

这是我在标记和CSS中进行其他更改https://jsfiddle.net/2tsfnauk/9/的小提琴

错误动画在图像滑块jQuery中

2 个答案: