脚本不是局部回传后正常工作 [英] Script not working properly after Partial PostBack

问题描述

我有以下脚本在我WebUserControl页（Public.ascx），用于由one.It的工作正常，但问题是我在移动每张幻灯片之一进行幻灯片 UpdatePanel的在我的aspx页面，在脚本/ CSS 不是局部回传后正确加载。

I have the following script in my WebUserControl page (Public.ascx), which is used to perform a slideshow by moving each slide one by one.It's working fine but the issue is I'm having UpdatePanel in my aspx Page so the script/Css not loading properly after Partial Postback.

<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>

我已经提到以下链接

I have referred the following links

<一个href=\"http://stackoverflow.com/questions/1477219/jquery-fancybox-not-working-after-postback?rq=1\">Jquery回传后没有的fancybox工作

Jquery Fancybox not working after postback

<一个href=\"http://stackoverflow.com/questions/3562005/jquery-is-not-working-after-partial-postback?rq=1\">jQuery部分回发后不工作

我试过了这些方法。
 如果我使用上述方法幻灯片不能正常移动

I tried those methods. If i use above methods The slide is not moving properly

我上面的方法后得到我是

What i'm getting after the above method is

第一张幻灯片 - >第三张幻灯片 - >第二 - >第 - >第三 - >第四等

是我真正需要的是

第一张幻灯片 - >第二张幻灯片 - >第三张幻灯片 - >第四幻灯片 - >第一张幻灯片

请帮我出

推荐答案

Blazemonger 给关于你的问题的解决方案

Blazemonger has given a solution regarding your problem

要优化整个事情多一点，可以消除currentPosition变量和moveSlide子功能，并且只使用一个回调的 .animate方法：

To optimize the whole thing a little more, you can eliminate the currentPosition variable and the moveSlide sub-function, and just use a callback in the .animate method:

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

来源

这篇关于脚本不是局部回传后正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！