Question

我想知道是否有人可以帮助我使用jquery循环或脚本。当点击一个按钮时，我想给div设置动画以在屏幕上滑动，当再次点击时，另一个div向下滑动。单击该按钮时，再次单击另一个div，依此类推。

这是我到目前为止所做的html标记

     <section id="1-text" class="horizontal-gallery-text">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa est, accumsan sed eleifend et, pulvinar sed lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat enim et metus porta eu elementum augue ultricies. Fusce bibendum augue interdum neque fringilla at v</p>
    </section>


    <section id="2-text" class="vertical-gallery-text init-hidden">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa est, accumsan sed eleifend et, pulvinar sed lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat enim et metus porta eu elementum augue ultricies. Fusce bibendum augue interdum neque fringilla at v</p>
    </section>


    <section id="3-text" class="horizontal-gallery-text init-hidden">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa est, accumsan sed eleifend et, pulvinar sed lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat enim et metus porta eu elementum augue ultricies. Fusce bibendum augue interdum neque fringilla at v</p> 
    </section>

和javascript：

var totalslides = '3';
        var slidenum = 0;
        var slidenext = 0;
        var slideType = '';
        $(function(){
            $('#gallery-next').data('counter',1);
            $('#gallery-next').click(function() {
               slidenum = parseInt($('#gallery-next').data('counter'));
               slidenext = slidenum+1
               slideType = $('#'+slidenum+'-slide').attr('class')
               slideType = slideType.split('-')[0]
               if (slideType=='horizontal') slideType='up';
               else slideType = 'right';
                //alert('Next slideType is: ' + slideType)
                //hide(slide) is a jQueryUI function, so ensure you include that lib
               $('#'+slidenext+'-slide').delay(500).delay(500).show('slide',{direction:slideType}, 1000);
               $('#'+slidenum+'-slide').delay(100).fadeOut(100);
               slidenum = slidenum % totalslides + 1;
               $('#gallery-next').data('counter',slidenum);
            });
        });

到目前为止，它滑动了一些幻灯片然而却被卡在了一些上。想知道是否有人能看到问题或想出更好的解决方案

Answer 1

我不知道问题是什么，但我有不同的方法来做到这一点。

我假设您希望div 1向右滑动，然后div 2向下滑动，然后div 3向右滑动。

我使用css3过渡来做这种事情，而不是jquery（我不喜欢jquery）。你应该有以下HTML代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        section{
            position:relative;
            transition: all 0.1s;
        }
    </style>
    <script type="text/javascript">
        var slidenum=0;
        window.onload=function(){
            var button=document.getElementById('gallery-next');
            button.onclick=function(){
                var curslide=document.getElementById(slidenum+'-slide');
                switch(slidenum++){
                    //replace the 700px with the value you want
                    case 1:curslide.style.top='700px';break;
                    case 2:
                    case 0:curslide.style.left='700px';break;
                }
                if(slidenum===3) button.addEventListener('click',function(){alert('we\'re already done')},false);
            }
        }
    </script>
</head>
<body>
    <!--<sections> here-->
</body>
</html>

未经测试

单击按钮时滑动html内容

1 个答案: