Question

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

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

<div class="page-container">

<h2 class="gallery-heading"> WAIKANAE BEACH HOUSE </h2>
    <img src="images/waikanae/next button.png" id="gallery-next"/>


    <div id="slider">

      <section class="horizontal-gallery">
        <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
        <p class="horizontal-gallery-text">Test text.</p>
      </section>

      <section class="vertical-gallery">
        <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
        <p class="horizontal-gallery-text">Test text.</p>
      </section>

      <section class="horizontal-gallery">
        <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
        <p class="horizontal-gallery-text">Test text.</p>
      </section>

    </div> 

$('#gallery-next').click(function() {
   $('.horizontal-gallery').hide('slide',{direction:'left'},1000);
});

Answer 1

根据您的描述，您需要：

$('div selector').hide('slide',{direction:'right'},1000);

还有：

$('button').click(function() {
   //sliding code
});

请参阅：http://docs.jquery.com/UI/Effects/Slide 并且：http://api.jquery.com/click/

Answer 2

这可能不是完全您想要的，但希望您会找到一些有用的代码提示。采取什么行之有效，并发布另一个问题来微调您的解决方案。它看起来有点乱，因为我在页面中包含了javascript和样式表，而不是将它们作为单独的文档。

请注意，hide（'slide'）方法来自jQueryUI，您也必须包含该库。

另请注意，根据另一张不幸删除帖子的海报的建议，ID已添加到每个部分元素中。

这是一个完全有效的例子（只是确保你的图像存在。它们可以是不同的图像）

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/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 = 'left';
//alert('Next slideType is: ' + slideType)
                //hide(slide) is a jQueryUI function, so ensure you include that lib
               $('#'+slidenum+'-slide').hide('slide',{direction:slideType},500);
               $('#'+slidenext+'-slide').fadeIn(1000);
               slidenum = slidenum % totalslides + 1;
               $('#gallery-next').data('counter',slidenum);
            });
        });
    </script>
    <style type="text/css" >
        .init-hidden {display:none;}
    </style>
</head>
<body>
<div class="page-container">

    <h2 class="gallery-heading"> WAIKANAE BEACH HOUSE </h2>
    <img src="images/waikanae/next button.png" id="gallery-next"/>

    <div id="slider">
        <section id="1-slide" class="horizontal-gallery">
            <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
            <p class="horizontal-gallery-text">Test text.</p>
        </section>

        <section id="2-slide" class="vertical-gallery init-hidden">
            <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-vertical"/>
            <p class="vertical-gallery-text">Test text.</p>
        </section>

        <section id="3-slide" class="horizontal-gallery init-hidden">
            <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
            <p class="horizontal-gallery-text">Test-text.</p>
        </section>
    </div> <!-- endDiv slider -->
</div> <!-- endDiv page-container -->
</body>
</html>

循环查找jquery

2 个答案: