Question

我在下面有这个功能。效果很好，来自http://caroufredsel.dev7studios.com/（到目前为止，如果其他人在旋转木马后，我发现了最好的和最简单的）

<script type="text/javascript" language="javascript">
  $(function() {
    $('#foo1').carouFredSel({
     auto: {
     pauseOnHover: 'resume',
     progress: '#timer1'
     }
    });
  });
</script>

无论如何，旋转木马会循环选择一些图像。现在我有一个单独的函数，通过下面的ajax调用重新加载div。它根据用户对文件夹的选择，使用一组新图像填充div。

<script>
  function getImages(id)
  {
     $.ajax({

 type: "GET",
 url: 'getImage.php',
 data: "id=" + id, 
 success: function(data) {

      $('#scrolimg').html(data);
    }

   });

  }
</script>

这也很好。问题是，当您单击一个新文件夹并重新加载刷新旋转木马完全停止的div。无论如何基于ajax调用的成功重新启动jquery函数来重新启动旋转木马？

Answer 1

在你调用的AJAX的回调函数上，你必须重新申请：

success: function(data) {  
        $('#foo1').carouFredSel({
            auto: {
                pauseOnHover: 'resume',
                progress: '#timer1'

            }
        });
...
}

如果您使用.html()函数或类似功能重新编写foo元素，则表示您正在删除与其关联的任何事件，因此您必须再次调用它。

Answer 2

在回调中添加以下内容：

$('#foo1').carouFredSel({
    auto: {
        pauseOnHover: 'resume',
        progress: '#timer1'

    }
});

它应该工作。对于！

Answer 3

假设你的例子是foo1 == scrolimg，请执行以下操作：

<script>
  function getImages(id)
  {
     $.ajax({

 type: "GET",
 url: 'getImage.php',
 data: "id=" + id, 
 success: function(data) {

      $('#scrolimg')
         .carouFredSel('destroy')
         .html(data)
         .carouFredSel({
            auto: {
            pauseOnHover: 'resume',
            progress: '#timer1'
           }
         });
      }

   });

  }
</script>

jquery函数只运行一次

3 个答案: