Jquery - 将图像附加到自动幻灯片

Question

嘿，我创建了一个小滑块：

http://jsfiddle.net/Jtec5/379/

当你悬停投掷“STOP SLIDE”时，autoslide停止：

var stopped=false;
$("#slideshow > div:gt(0)").hide();      
setInterval(function() { 
  if(!stopped){
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
  }
},  2000);

$('#stopSlide').mouseover(function(){
  stopped=true;
  // how to append new picture here?
})
$('#stopSlide').mouseout(function(){
  stopped=false;
})

我的问题是如何在有一个mousover时将新图像附加到#stopSlide，就像我在我的代码中写的那样......在这种情况下，任何人都可以帮助我吗？

问候!!

Answer 1

在http://jsfiddle.net/Jtec5/381

查看更新后的小提琴

我在mouseover回调中添加了以下内容

template = $('<div></div>')
  .hide()
  .append(
      $('<img>').attr({ src : imageUrl })
  )

$("#slideshow").append(template);

代码创建一个div并向其附加一个带有src = imageUrl的img元素。您需要将imageUrl变量设置为要在模板分配之前插入的图像的URL。 图像将添加到当前元素之前，并将显示在以下循环中。