Javascript 带按钮控制的旋转木马

我正在做这个旋转木马。 我让旋转木马按我想要的方式移动，现在我正在尝试在它下面添加一些控件，一些小按钮来链接旋转木马图像。 因此，每当一个活动时，相应的转盘也会活动。 我不知道它为什么不起作用。。 有什么帮助吗

下面是HTML代码

<div id="carousel">
<div class="clear"></div>
<div class="slider">
    <li>
        <img src="http://s3.amazonaws.com/contemporaryartgroup/wp-content/uploads/2012/02/HZ_GCC_VUE3.jpg">
    </li>
    <li>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_wMcqVx7UDxoNz7YGodjI7IkO7dLREESp0RHRHIGc9bsgGFTkYg">
    </li>
    <li>
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRelq6Cmc_PV3FHGS4rzISfaL8FtjTAa0w1BXu3wR6GlDR7mLTiMw">
    </li>
    <li>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRivHTJU30bZXeFRoyemfX5ZHrkd-iP9hAydsoZ9onvFE8cTcmS">
    </li>
    <div class="clear"></div>
</div>                
</div>
   <div class="buttons">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <div class="clear"></div>
  </div>

CSS

这是小提琴链接

---

不太清楚你想做什么。您想要更改图像的控件吗？所以，无论何时，当一个处于活动状态时，相应的旋转木马也处于活动状态，这一部分就是你失去我的地方。另外-按钮本身在JSFIDLE中不可见。在普通的旋转木马中，底部有小按钮，这些按钮与旋转木马图像链接。因此，当显示第一个图像时，第一个按钮处于活动状态，其他按钮看起来处于活动状态。当显示第二个图像时，第二个按钮看起来处于活动状态。这就是我在上面的网站上尝试的。图像底部有一些小控件。我试图将控件与图像一起移动如果在JSFIDLE中有可见的按钮，我一定是瞎的。我在你的代码中看到了它们，但我也看到了0高度：|是的，我也没有看到它们，我添加了最小高度和最小宽度，但我仍然没有看到它们。你的HTML无效，可能无法在不同的浏览器中正确呈现。列表元素用div包装。请更正HTML并使用ol、ul或菜单标记包装li元素。

    $(document).ready(function () {
    // settings
    var $slider = $('.slider'); 
    var $slide = 'li';         
    var $transition_time = 1000; // 1 second
    var $time_between_slides = 4000; // 4 seconds
    var $btn = $('.buttons');
    var $buttonanchor = 'li';

    function slides() {
        return $slider.find($slide);
    }
    slides().fadeOut();
    // set active classes
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    //set buttons
    function button() {
        return $btn.find($buttonanchor);
    }
    button().first().removeClass('btnnotactive');
    button().first().addClass('btnactive');
    button().first().fadeIn($transition_time);

    $interval = setInterval(
   function () {
    var $i = $slider.find($slide + '.active').index();      
    slides().eq($i).removeClass('active');
    slides().eq($i).fadeOut($transition_time);     
    if (slides().length == $i + 1) $i = -1; // loop to start
    slides().eq($i + 1).fadeIn($transition_time);
    slides().eq($i + 1).addClass('active');

    var $j = $btn.find($buttonanchor + '.btnnotactive').index();
    button().eq($j).removeClass('.btnactive');
    if (button().length == $j + 1) $j = -1;
    button().eq($j + 1).fadeIn($transition_time);        
    button().eq($j + 1).addClass('btnnotactive');
}
, $transition_time + $time_between_slides
 );

});

<style type="text/css">
#carousel
{
    min-width: 255px;
    min-height: 290px;
    margin: 0 auto;
}

.slider
{
    margin: 10px 0;
    width: 580px; /* Update to your slider width */
    height: 250px; /* Update to your slider height */
    position: relative;
    overflow: hidden;
}
.slider li
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    list-style: none;
}
.buttons
{
    /*padding:0 0 5px 0;*/

}

.buttons li
{
    display: inline;
 background-image: url("http://www.iconmay.com/thumbnails/detail/3/violet%20button%20violet%20dot%20circle%20blank%20empty%20violet%20button%20icon.png");
    background-repeat:no-repeat;
}
.btnactive
{
    background:url(http://www.iconmay.com/thumbnails/detail/3/green%20button%20green%20dot%20circle%20blank%20empty%20green%20button%20icon.png);
    background-repeat:no-repeat;
}