各スライドにリンクがあり、スライドの動きをトリガーするスライドに取り組んでいます。しかし、最初のスライドを読み込みページに表示する方法がわかりません。それを機能させるには、最初のスライドを表示し、他のスライドを非表示にする必要がありました。これは実際の修正ではありません。だから私はそれを変更する必要があります
ここにフィドルがあります
http://jsfiddle.net/Paula/XmeGN/10/
また、右ではなく左にスライドさせることもできます。
助けてくれてありがとう！
HTML
<div id="banner_container" style="min-height:160px; clear:both;">
<div id="banner_wrapper">
<div class="banner_panel2" id="target1">
<a href="#target1" class="banner_panel">Target 1</a><br/>
<a href="#target2" class="banner_panel">Target 2</a><br/>
<a href="#target3" class="banner_panel">Target 3</a><br/>
Target 1
</div>
<div class="banner_panel" id="target2">
<a href="#target1" class="banner_panel">Target 1</a><br/>
<a href="#target2" class="banner_panel">Target 2</a><br/>
<a href="#target3" class="banner_panel">Target 3</a><br/>
Target 2
</div>
<div class="banner_panel" id="target3">
<a href="#target1" class="banner_panel">Target 1</a><br/>
<a href="#target2" class="banner_panel">Target 2</a><br/>
<a href="#target3" class="banner_panel">Target 3</a><br/>
Target 3
</div>
</div>
</div>
ジャバスクリプト:
jQuery(function($) {
$('a.banner_panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if (!$target.hasClass('active')) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
}
});
});
CSS:
* {
margin:0;
padding:0;
list-style:none;
}
#banner_container {
width:880px;
position:relative;
background-color:#E6E6E6;
margin:30px;
background-image: linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%);
background-image: -o-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%);
background-image: -moz-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%);
background-image: -webkit-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%);
background-image: -ms-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.22, rgb(207,207,207)),
color-stop(0.82, rgb(247,247,247))
);
border:1px #CCC solid;
border-radius:10px;
-moz-border-radius:10px;
padding:20px 10px 10px 10px;
overflow:hidden;
}
#banner_wrapper{
width:890px;
position:relative;
z-index:5;
}
div.banner_panel {
position: absolute;
height: 100%;
width: 100%;
display:none;
}
div.banner_panel2 {
position: absolute;
height: 100%;
width: 100%;
}