スライドショー内で 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>