0

我让 Jquery div 在幻灯片中滑出。我已经使用这个文档来构建它。

如果你在这里查看我的案例，你会发现 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>
4

2 回答 2

0

如何使用这样的东西：

$(".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('>');
    }        
});​

显然你可以花点心思（不使用 < 和 > 来表示方向将开始）但是滑出工作，这是一个演示，虽然它没有使用你的 html

编辑 - 这是一个更新的小提琴，使用了你的 html 的一个非常轻微的修改版本。我减少了幻灯片的宽度并重新排列了一些滑出的东西（带有点击图像等），以使其更容易理解。

让我知道这是否像您现在想要的那样工作，它应该很容易实现。

于 2012-11-12T10:54:51.157 回答
0

尝试这样的事情

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>

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

于 2012-11-12T10:51:39.813 回答