Question

我的WebUserControl页面（Public.ascx）中有以下脚本，用于通过逐个移动每个幻灯片来执行幻灯片放映。它工作正常，但问题是我有UpdatePanel个我的aspx页面，因此script/Css在部分回发后无法正确加载。

<style type="text/css">
    .slideshow .slideshowWindow {
        width: 980px;
        height: 500px;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
    }

        .slideshow .slideshowWindow .slide {
            margin: 0;
            padding: 0;
            width: 980px;
            height: 500px;
            float: left;
            position: relative;
        }

    .placeholder {
        width: 980px;
        text-align: center;
    }
</style>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript">
    function pageLoad() {

        var currentPosition = 0;
        var slideWidth = 980;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        var slideShowInterval;
        var speed = 3000;


        slideShowInterval = setInterval(changePosition, speed);

        slides.wrapAll('<div id="slidesHolder"></div>')

        slides.css({ 'float': 'left' });
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);


        function changePosition() {
            if (currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
            } else {
                currentPosition++;
            }
            moveSlide();
        }


        function moveSlide() {
            $('#slidesHolder')
              .animate({ 'marginLeft': slideWidth * (-currentPosition) }, "slow");
        }
    }
</script>

我已经提到了以下链接

Jquery Fancybox not working after postback

jQuery is not working after partial postback

我试过那些方法。如果我使用上述方法幻灯片没有正确移动

上述方法后我得到的是

第一张幻灯片 - ＆gt;第三张幻灯片 - ＆gt;第二 - ＆gt;第一 - ＆gt;第三 - ＆gt;第四，等等。

我真正需要的是

第一张幻灯片 - ＆gt;第二张幻灯片 - ＆gt;第三张幻灯片 - ＆gt;第四张幻灯片 - ＆gt;第一张幻灯片

请帮帮我

Answer 1

Blazemonger为您的问题提供了解决方案

为了更好地优化整个事物，你可以消除currentPosition变量和moveSlide子函数，只需在.animate method中使用回调：

function changePosition() {
    $('#slidesHolder').animate({
        'marginLeft': 0-slideWidth
    }, function() {
        $('#slidesHolder').css('marginLeft', 0)
            .children().first().appendTo('#slidesHolder');
    });
}

Source

Partial PostBack后脚本无法正常工作

1 个答案: