Jquery 嵌入幻灯片中的动画只运行一次

我设计了一个幻灯片放映，第一张幻灯片是动画（由photoshop设计并导出为html），其他幻灯片是简单的jpg文件。因此，与其他人相比，我必须在第一张幻灯片上投入不同的放映时间。 我使用以下代码执行此操作：

js是：

<script type="text/javascript">
            $(function() {
               $('#slideshow_2').cycle({
                    fx: 'fade',     
                    speed:  'fast', 
                    timeoutFn: function(curr, next, opts, fwd) {
                        return parseInt($(opts.elements[opts.currSlide]).attr("data-duration"))* 1000;
                    },
                    pager: '.slides  .slideshow_paging', 
                    before: function(currSlideElement, nextSlideElement) {
                        var data = $('.data', $(nextSlideElement)).html();
                        $('.slides  .slideshow_box').stop(true, true).animate({ bottom:'-110px'}, 400, function(){
                            $('.slides  .slideshow_box .data').html(data);
                        });
                        $('.slides  .slideshow_box').delay(100).animate({ bottom:'0'}, 400);
                    }
                });

                $('a[href="#"]').click(function(event){ 
                    event.preventDefault(); // for this demo disable all links that point to "#"
                });             
            });         
        </script>

$（函数（）{
$（'#幻灯片放映_2'）。循环({
外汇：“淡出”，
速度：“快”，
timeoutFn：函数（当前、下一个、选项、前进）{
返回parseInt（$（opts.elements[opts.currside]）.attr（“数据持续时间”））*1000；
},
寻呼机：'.slides.slideshow_paging'，
before:函数（currSlideElement、nextSlideElement）{
var data=$（'.data'，$（nextSlideElement））.html（）；
$（'.slides.slideshow_box'）。停止（true，true）。设置动画（{bottom:'-110px'}，400，function（）{
$（'.slides.slideshow_box.data'）.html（数据）；
});
$（'.slides.slideshow_box'）。延迟（100）。动画（{bottom:'0'}，400）；
}
});
$（'a[href=“#”]”）。单击（函数（事件）{
event.preventDefault（）；//对于此演示，禁用指向“#”的所有链接
});             
});         

html是：

 <div class="slides">
                <div class="slideshow_paging"></div>
                <div class="slideshow_box">
                    <div class="data"></div>
                </div>
                <div class="container"><div class="timer"></div></div>
                <div id="slideshow_2" class="slideshow">

                        <img data-duration="14" src="images/animation.gif" style="width:100%;height:350px"/>

                        <img data-duration="5" src="images/translation2.jpg" style="width:100%;height:350px"/>

                        <img data-duration="5" src="images/translation3.jpg" style="width:100%;height:350px"/>

                        <img data-duration="5" src="images/translation4.jpg" style="width:100%;height:350px"/>

                </div>
            </div>

第一次播放幻灯片时，输出效果非常好。我的意思是，当我第一次进入页面或刷新页面时，嵌入在第一张幻灯片中的动画显示得很好。但是，当幻灯片开始循环重复和移动时，第一张幻灯片中的动画不再工作，只显示其图像

---

我已尝试添加和ommiting$（function（）…但没有帮助。

当您在浏览器中单独查看动画gif时（没有html，只需加载图像），是否循环？您必须将其设置为gif。我已在photoshop中制作了一个动画文件，并使用“为web和设备保存”工具将其保存。该文件已自动保存为gif格式。是的，它第一次在网页中正常工作，但在其他回合中无法正常工作。photoshop在需要“永久”时将动画gif默认为“一次”。请检查以使如果在photoshop中设置为“永远”，或者选择“是”，则设置为“永远”，但没有任何帮助。这是一个场景：1-幻灯片1上有动画文件。2-想象幻灯片1正在运行，但尚未完成。3-如果例如，我单击“寻呼机部分”转到幻灯片3，然后再次返回幻灯片1，幻灯片1将从以前的状态继续运行e、 5-我需要每次放映幻灯片1时，都从第一部分开始放映，而不是从上一部分开始放映。