0

我想知道是否有人可以帮助我使用 jquery 循环或脚本。当一个按钮被点击时，我想让一个 div 动画在屏幕上滑动，当再次点击另一个 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);
            });
        });

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

4

1 回答 1

0

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

我假设您希望 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>

这未经测试

于 2013-02-21T23:38:23.177 回答