1

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

2 回答 2

0

根据您的描述，您将需要：

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

并且：

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

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

于 2013-02-14T02:39:17.947 回答
0

这可能不是您想要的，但希望您能找到一些有用的代码想法。采取有效的方法，然后发布另一个问题以微调您的解决方案。它看起来有点乱，因为我在页面中包含了 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>
于 2013-02-14T19:26:30.450 回答