JavaScript slidershow

Question

Every time I run the following code, the browser freezes than crashes afterwards without any for the content on the page loading

javascript

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

    <script src="Scripts/jquery-ui-1.10.4.js" type="text/javascript"></script>
    <script src="Scripts/jquery-2.1.0.js" type="text/javascript"></script>
    <script src="Scripts/jquery-2.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var speed = 2000;
            var run = setInterval('rotate()', speed);

            var item_width = $('#adverts-pics li').outerWidth();
            var left_value = item_width * (-1);
            $('#adverts-pics li:first').before($('#adverts-pics li:last'));

            $('#adverts-pics ul').css({ 'left': left_value });

            $('#prev').click(function () {

                var left_indent = parseInt($('#adverts-pics ul').css('left')) + item_width;

                $('#adverts-pics ul').animate({ 'left': left_indent }, 200, function () {
                    $('#adverts-pics li:first').before($('#adverts-pics li:last'));

                    $('#adverts-pic ul').css({ 'left': left_value });
                });

                return false;

            });

            $('#adverts-pics').click(function () {

                var left_indent = parseInt($('#adverts-pics ul').css('left')) - item_width;

                $('#adverts-pics ul').animate({ 'left': left_indent }, 200, function () {
                    $('#adverts-pics li:last').after($('#adverts-pics li:first'));

                    $('#adverts-pics ul').css({ 'left': left_value });
                });

                return false;

            });






        });
        function rotate() {
            $('#adverts-pics').click();
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            while (true) {
                var check = "0px";
                var check2 = "-980px";
                var check3 = "-1960px";
                var check4 = "-2940px";
                var check5 = "-3920px";
                var check6 = "-4900px";
                var check7 = "-5880px";
                var current = $("adverts-pics").css("left");
                setTimeout(function () {
                    if (check == current)
                        $("adverts-pics").css("left", check2);
                    else if (check2 == current)
                        $("adverts-pics").css("left", check3);
                    else if (check3 == current)
                        $("adverts-pics").css("left", check4);
                    else if (check4 == current)
                        $("adverts-pics").css("left", check5);
                    else if (check5 == current)
                        $("adverts-pics").css("left", check6);
                    else if (check6 == current)
                        $("adverts-pics").css("left", check7);
                    else
                        $("adverts-pics").css("left", check);

                }, 3000);
            }
        });
    </script>

html

   <div id="adverts">
        <div id="adverts-pics">
            <ul>
                <li>
                    <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/Images/Advert/banner_FIFA_980x365_Visa_AA_Rev2_Final.jpg"></asp:HyperLink>
                </li>
                <li>
                    <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/Images/Advert/GBOTY_banner-2013_980x365-JM.jpg"></asp:HyperLink>
                </li>
                <li>
                    <asp:HyperLink ID="HyperLink3" runat="server" ImageUrl="~/Images/Advert/mortgage_checkup_banner.jpg"></asp:HyperLink>
                </li>
                <li>
                    <asp:HyperLink ID="HyperLink4" runat="server" ImageUrl="~/Images/Advert/online-mobile-banner_980x365-v04.jpg"></asp:HyperLink>
                </li>
                <li>
                    <asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="~/Images/Advert/scotia_investments.jpg"></asp:HyperLink></li>
                <li>
                    <asp:HyperLink ID="HyperLink6" runat="server" ImageUrl="~/Images/Advert/SCOTIA_WEB_BANNER_DEPOSITS.jpg"></asp:HyperLink>
                </li>
                <li>
                    <asp:HyperLink ID="HyperLink7" runat="server" ImageUrl="~/Images/Advert/ScotiaProfessionalPlanBanner.jpg"></asp:HyperLink>
                </li>
            </ul>
        </div>






        <asp:RadioButtonList ID="RadioButtonList1" CssClass="radiobuttonlist" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" RepeatDirection="Horizontal">
            <asp:ListItem Value="~/Images/Advert/banner_FIFA_980x365_Visa_AA_Rev2_Final.jpg" Text=""></asp:ListItem>
            <asp:ListItem Value="~/Images/Advert/GBOTY_banner-2013_980x365-JM.jpg" Text=""></asp:ListItem>
            <asp:ListItem Value="~/Images/Advert/mortgage_checkup_banner.jpg" Text=""></asp:ListItem>
            <asp:ListItem Value="~/Images/Advert/online-mobile-banner_980*355-v04.jpg" Text=""></asp:ListItem>
            <asp:ListItem Value="~/Images/Advert/scotia_investments.jpg" Text=""></asp:ListItem>
            <asp:ListItem Value="~/Images/Advert/SCOTIA_WEB_BENNER_DEPOSITS.jpg" Text=""></asp:ListItem>
            <asp:ListItem Value="~/Images/Advert/ScotiaProfessionalPlanBanner.jpg" Text=""> </asp:ListItem>
        </asp:RadioButtonList>


    </div>

You might want to read this http://stackoverflow.com/questions/21443531/understanding-javascripts-single-threaded-nature — tkone, Apr 08 '14 at 15:22

score 1 · Accepted Answer · answered Apr 08 '14 at 15:19

1

        while (true) {

This is an infinite loop... that's why the browser crashes

You should create a function that calculate the next check value and call it in the setTimeout.

answered Apr 08 '14 at 15:19

Finrod

2,425
4
28
38

JavaScript slidershow

1 Answers1