我正在处理带有选项卡式面板的页面。在这些面板下方，我正在查看无限轮播幻灯片。每当我单击选项卡时，我希望其中的图像与选项卡的内容对齐。
我有标签的 id 和幻灯片图像的 id，所以我需要一个功能，每当我点击标签 1 时，轮播会自动滚动到例如 slide1。
该功能应与滑块/轮播的分页器或分页相似或相同
我正在为此工作几天，但我对 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;
}