1

我正在为网站创建滑动/动画页面模板。

默认情况下，我在用户屏幕上显示 3 页。在左侧，我们可以看到上一页的 10%。在屏幕中央，我正在显示当前页面，在右侧，我们可以看到 10% 的下一页。

在这个网站上，有一个顶部菜单允许我们选择任何项目并在页面之间导航。每个项目都链接到本网站的 5 个当前页面之一，并显示相应的页面标题。

当我单击顶部菜单的一项时，我将向左或向右滑动/动画页面，直到我设置并到达链接到所选菜单项的正确页面。

这是“myLoopright”函数，我可以在其中多次调用 sliddingright 函数。

        function myLoopright () 
        {          
            //  create a loop function
            setTimeout(function () 
            {   
                sliddingright(page_id_target_right,previous_right_old,previous_right,next_right,pages_numbers,loop);
                loopcount++;    //  increment the counter

                if (loopcount <= (difference_pages-1)) 
                {   
                   myLoopright();       //  ..  again which will trigger another 
                }                        
            }, 1100) //  ..  setTimeout()
        } // closing myLoop function

这是向右滑动的功能

function sliddingright(page_id_target_right,previous_right_old,previous_right,next_right,pages_numbers,loop)
{

        duration=1000;
        //Update top Menu DOM items
        $('ul#navigation #'+page_id_target_right).addClass('active');
        $('ul#navigation #'+next_right).addClass('next');
        $('ul#navigation #'+pages_numbers).addClass('previous');

         //Update DOM pages                     
            previous_right_old=parseInt(pages_numbers-1);           
            // PREVIOUS TO HIDDEN
            $('#content .'+previous_right_old).css({ 'left' : '-73%','background-color' : '#EAEAEA'}).animate({'left' : '-151%'}, duration, easing, function(){$('#content .'+previous_right_old).addClass('hidden')});
            // ACTIVE TO PREVIOUS           
            $('#content .'+pages_numbers).css({ 'margin' : '0 6%', 'left' : '5%', 'right' : '5%'}).animate({'left' : '-73%', 'margin-right' : '0%', 'margin-left' : '0%', 'backgroundColor' : '#EFF0F1' }, duration, easing, function(){$('#content .'+pages_numbers).removeClass('hidden').addClass('previous')});                     
            // NEXT TO ACTIVE           
            $('#content .'+page_id_target_right).css({ 'left' : '95%','background-color' : '#EAEAEA'}).animate({'left' : '5%', 'margin-right' : '6%', 'margin-left' : '6%', 'backgroundColor' : '#FFFFFF' }, duration, easing, function(){$('#content .'+page_id_target_right).addClass('active').removeClass('hidden');});
            // HIDDEN TO NEXT
            $('#content .'+next_right).removeClass('hidden').addClass('next').appendTo('#content').css({ 'left' : '173%', 'backgroundColor' : '#EFF0F1'}).animate({'left' : '95%'}, duration);
    }

这段代码可以工作，但是，当我必须滑动很多页面时，滑动效果并不流畅。

所以我想在sliddingright函数的所有动画完成后调用“myLoopright”函数并删除setTimeout函数。

要查看我的开发代码，你可以去这里：http: //jsfiddle.net/K2xZB/89/

干杯

4

0 回答 0