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

このようなことを試してください

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 に答える
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 に答える