jQuery转盘，创建按钮'；单击转到幻灯片x'；

我正在制作一个带有选项卡式面板的页面。在这些面板下面，我正在观看无限旋转木马幻灯片。每当我点击一个标签，我希望里面的图像将与标签内容对齐

我有标签的id，我有幻灯片图像的id，所以我需要一个功能，每当我点击标签1，旋转木马自动滚动到例如幻灯片1

该功能应与滑块/转盘的寻呼机或分页功能相似或相同

我花了几天的时间研究这个问题，但我对jquery完全是新手，我无法理解如何编写函数和变量

有人知道应该朝哪个方向看，或者需要什么函数和变量，或者在当前设置中是否可能

提前谢谢

HTML

CSS

---

让我在文件里找一下。。。（2分钟后）好的，看看这些方法，第一个方法是

滚动

。医生说：“

.jcarousel（'scroll'，target[，animate[，callback]]）

---

按给定偏移量滚动到特定项或相关项“

查看一个非常好的JQuery旋转木马插件。它有很多功能、方法、事件。。。它有很好的文档化的chdvlp，我下载了jcarousel并将其集成到我的页面上。我做了一个配置，你是对的，非常简单。包裹被配置为“圆形”，因此它的工作原理与我上面的代码相同，但我仍然不知道我可以使用什么功能制作一个按钮来滑动到旋转木马的某个幻灯片。这四个选项卡应链接到幻灯片，这样每当单击选项卡时，幻灯片都会自动移动=“TabbedPanelsTabGroup”>

“>conn

@TCHdvlp您能帮忙吗？@TCHdvlp我还在文档中找到了滚动元素。但我真的不知道如何将函数链接到特定的选项卡和幻灯片。例如，如果我想将id=conn的选项卡链接到幻灯片8，那么代码会是什么样子，我会在单击时放置它？

      <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>

$(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;
  });    
});

#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;
}