タブ付きパネルのあるページで作業しています。これらのパネルの下に、無限のカルーセル スライドショーが表示されています。タブをクリックするたびに、タブ内の画像がタブのコンテンツと一致するようにしたいと考えています。
タブのIDとスライドショー画像のIDがあるため、タブ1をクリックするとカルーセルが自動的にスライド1などにスクロールする機能が必要です。
この機能は、スライダー/カルーセルのページャーまたはページネーションと同様または同じである必要があります
私はこれが数日間発生するように取り組んでいますが、私はjqueryにまったく慣れていないため、関数と変数の書き方に頭を悩ませることができません。
誰がどの方向を見るべきか、どの関数と変数が必要か、または現在のセットアップで可能かどうかを知っていますか?
前もって感謝します
HTML
<div id="carousel">
<div id="buttons">
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
</div>
<div id="slides">
<ul>
<li id="slide1"><img src="images/slide1.png" id="slide1" alt="Slide 1"/></li>
<li id="slide2"><img src="images/slide2.png" id="slide2" alt="Slide 2"/></li>
<li id="slide3"><img src="images/slide3.png" id="slide3" alt="Slide 3"/></li>
<li id="slide4"><img src="images/slide4.png" id="slide4" alt="Slide 4"/></li>
<li id="slide5"><img src="images/slide5.png" id="slide5" alt="Slide 5"/></li>
<li id="slide6"><img src="images/slide6.png" id="slide6" alt="Slide 6"/></li>
<li id="slide7"><img src="images/slide7.png" id="slide7" alt="Slide 7"/></li>
<li id="slide8"><img src="images/slide8.png" id="slide8" alt="Slide 8"/></li>
</ul>
<div class="clear"></div>
</div>
</div>
jQuery
$(document).ready(function() {
//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);
//grab the width and calculate left value
var item_width = $('#slides li').outerWidth();
var left_value = item_width * (-1);
//move the last item before first item, just in case user click prev button
$('#slides li:first').before($('#slides li:last'));
//set the default item to the correct position
$('#slides ul').css({'left' : left_value});
//if user clicked on prev button
$('#prev').click(function() {
//get the right position
var left_indent = parseInt($('#slides ul').css('left')) + item_width;
//slide the item
$('#slides ul:not(:animated)').animate({'left' : left_indent}, 500,function(){
//move the last item and put it as first item
$('#slides li:first').before($('#slides li:last'));
//set the default item to correct position
$('#slides ul').css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if user clicked on next button
$('#next').click(function() {
//get the right position
var left_indent = parseInt($('#slides ul').css('left')) - item_width;
//slide the item
$('#slides ul:not(:animated)').animate({'left' : left_indent}, 500, function () {
//move the first item and put it as last item
$('#slides li:last').after($('#slides li:first'));
//set the default item to correct position
$('#slides ul').css({'left' : left_value});
});
//cancel the link behavior
return false;
});
});
CSS
#carousel {
width:896px;
height:172px;
margin:0 auto;
}
#slides {
overflow:hidden;/* fix ie overflow issue */
position:relative;
width:896px;
height:172px;
border:none;
float:left;
}
/* remove the list styles, width : item width * total items */
#slides ul {
left:-250px;
top:0;
list-style-type:none;
padding:0px;
width:9999px;
position:relative;
}
/* width of the item, in this case I put 250x250x gif */
#slides li {
width:296px;
height:172px;
float:left;
padding:0px;
}
#slides li img {
padding:0px;
margin:0 23px 0 23px;
}
/* Styling for prev and next buttons */
#buttons {
padding:0 0 0 0;
position:relative;
}
#buttons a {
display:block;
width:43px;
height:70px;
text-indent:-999em;
float:left;
outline:0;
}