Question

我让Jquery div在幻灯片放映中滑出。我已使用此documentation来构建它。

如果您查看here我的情况，您可以在幻灯片放映中找到Jquery div滑出，如果您点击箭头，潜水就会出来，但是一旦幻灯片出来我就无法提供功能，它可以关闭点击箭头。

可能有更简单，更好的方法，这就是我正在使用的代码。

如何让我的箭回来工作以关闭div滑出？如果您认为有更好的方法可以实现这一目标，请告诉我。

希望解释清楚

感谢您的帮助

  <script>
      $(document).ready(function()
      {
          $(".click").click(function ()
          {
             $(".slideout").toggle("slide", {}, 100);
             $('.click').hide();
             $('.back').toggle();
          });
     });
</script>

我的CSS代码：

    .slideout { display: none; margin: 0px; width: 300px; height: 450px; background: url("img/rejilla.png") repeat scroll 0 0 transparent; position: absolute; z-index: 101; top:15px;
    -webkit-border-top-left-radius: 16px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 16px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 16px; border-bottom-left-radius: 4px; opacity: 0.5; }
    .click { z-index: 102; left:-15px; position: absolute; top: 10px; z-index:102; }
    .back {float: right; position: absolute; z-index: 102; left: 285px; top: 15px; display: none;}

HTML代码

<div id="slideshow">
        <div id="example">
            <img src="img/arrow.png" class="click" alt="arrow" width="50" height="100" /><div class="slideout">bla bla bla</div><img src="img/arrow-prev.png" class="back" alt="arrow" width="50" height="100" /> 
                <div id="slides">
                    <div class="slides_container">
                        <a href="" title="Slide 1" target="_blank"><img class="slide" src="img/slide-1.jpg" alt="slide-1" width="1020" height="450" /></a>
                        <a href="" title="Slide 2" target="_blank"><img class="slide" src="img/slide-2.jpg" alt="slide-2" width="1020" height="450" /></a>
                        <a href="" title="Slide 3" target="_blank"><img class="slide" src="img/slide-3.jpg" alt="slide-3" width="1020" height="450" /></a>
                    </div>
                </div>
        </div>
    </div>
</div>

Answer 1

尝试这样的事情

HTML代码

<img id="myImg" class="click" width="50" height="100" alt="arrow" src="img/arrow.png">

的Javascript

<script>
  $(document).ready(function()
  {
      $("#myImg").click(function ()
      {
         $(".slideout").toggle("slide", {}, 100);
         if($(this).hasClass('click')){
            $(this).removeClass('click');
            $(this).addClass('back');
         }else{
            $(this).removeClass('back');
            $(this).addClass('click');
         }
      });
 });
</script>

我没有检查过代码，所以这只是粗略的想法

Answer 2

如何使用这样的东西：

$(".click").click(function() {
    margin = +$('.slideout').css('margin-left').replace('px', '');
    if (margin < 0)
    {
        $('.slideout').animate({marginLeft: "0px"}, 500 );
        $('.click').text('<');
    } else {
        $('.slideout').animate({marginLeft: "-200px"}, 500 );
        $('.click').text('>');
    }        
});

显然你可以把它想象一下（不使用＆lt;和＆gt;来表示方向会开始）但是滑出工作，here's a demo虽然没有使用你的html

编辑 - 这是一个更新的fiddle，使用了一个非常轻微的html版本。我减少了幻灯片的宽度，并重新排列了一些滑动内容（使用点击图片等），使其更容易理解。

如果现在按照您的意愿运行，请告诉我，它应该非常容易实现。

切换到jquery div滑出

2 个答案: