Question

我设计了一个幻灯片，第一张幻灯片是动画（由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>

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>

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

我尝试过添加和省略$（function（）...但它没有帮助。

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

0 个答案: