Javascript 带缩略图的旋转木马，在旋转木马旋转时将类添加到下一个LI

我有一个旋转木马，下面有小缩略图。我正在添加一个.isActive类，以显示位于每个缩略图上的隐藏对象。当旋转木马第一次滑动时，我可以从第一个缩略图中删除.isActive类。但我无法添加。我将活动添加到下一个

如何将选定的缩略图与相应幻灯片匹配

这是一把小提琴：

这是我的HTML：

<div class="js-carousel">
  <div class="slidesContainer">
    <ul class="clearfix">
      <li class="slide green">One</li>
      <li class="slide blue">Two</li>
      <li class="slide red">Three</li>
    </ul>
  </div>
  <!-- /slidesContainer -->
  <div class="thumbnailContainer">
    <ul>
      <li class="thumb green">
        <div>
          <a href="#">
            <div class="smallSlide"></div>
            <div class="thumbOverlay isActive"></div>
          </a>
        </div>                                  
      </li>
      <li class="thumb blue">
        <div>
          <a href="#">
            <div class="smallSlide"></div>
            <div class="thumbOverlay"></div>
          </a>
        </div>
      </li>
      <li class="thumb red">
         <div>
          <a href="#">
            <div class="smallSlide"></div>
            <div class="thumbOverlay"></div>
          </a>
        </div>
      </li>
    </ul>
  </div>
  <!-- /thumbnailContainer -->
</div>
<!-- /js-carousel -->

以下是我的JavaScript：

var slide_width = $('.slidesContainer li').outerWidth();

var left_value = slide_width * (-1);

$(document).ready(function() {

  var speed = 3000;
  var run = setInterval('rotate()', speed);

  $('.slide:first').before($('.slide:last'));

  //set the default item to the correct position 
  $('.slidesContainer ul').css({'left' : left_value});

  $('.slidesContainer').hover(

    function() {
      clearInterval(run);
    }, 
    function() {
      run = setInterval('rotate()', speed); 
    }
  ); 

});

function rotate() {
  //get the right position            
  var left_indent = parseInt($('.slidesContainer ul').css('left')) - slide_width;

  $('.slidesContainer ul').animate(
    {
      'left' : left_indent
    },
     200,
     function() {

       //Remove the class .isActive from the current active thumbnail
       $('.thumbnailContainer .thumbOverlay.isActive').removeClass('isActive');

       //move the first item and put it as last item
       $('.slidesContainer li:last').after($('.slidesContainer li:first'));                  

       //set the default item to correct position
       $('.slidesContainer ul').css({'left' : left_value});

     }
   );

}

//为了大形象

  <a href="<%# Eval("Link") %>"><img src="<%# Eval("Path") %>" alt="<%# "#htmlcaption" + (Container.ItemIndex + 1).ToString() %>"  /></a>

---

我是用Repatter创建的，但是你可以创建你想要的任何东西

我不确定我是否遵循了aspx。我不熟悉asp。但我会玩这个。

  <a href="<%# Eval("Link") %>"><img src="<%# Eval("Path") %>" alt="<%# "#htmlcaption" + (Container.ItemIndex + 1).ToString() %>"  /></a>

<li rel='<%#(Container.ItemIndex + 1).ToString() %>'> <img src="<%# Eval("Path") %>" width="50" height="50" /></li>

<div id='wrapper'>
        <div id='header'></div>
        <div id='body'>
            <div id="bigPic">


              <asp:Repeater ID="RepeaterBigBanner" runat="server">  
    <HeaderTemplate>  

    </HeaderTemplate>  
    <ItemTemplate>
         <a href="<%# Eval("Link") %>"><img src="<%# Eval("Path") %>" alt="<%# "#htmlcaption" + (Container.ItemIndex + 1).ToString() %>"  /></a>
    </ItemTemplate> 

    <SeparatorTemplate>  

    </SeparatorTemplate> 
</asp:Repeater>

                <%--<img src="imgs/1.jpg" alt=""  width="650" height="250"/>--%>

            </div>

            <div id="kucukList" runat="server" style="height:60px;text-align: center;">
            <ul id="thumbs" >
                <%--<li class='active' rel='1'><img src="imgs/1_thumb.jpg" alt="" /></li>
                <li rel='2'><img src="imgs/3_thumb.jpg" alt="" /></li>--%>
                 <asp:Repeater ID="RepeaterIconBanner" runat="server">  
    <HeaderTemplate>  

    </HeaderTemplate>  
    <ItemTemplate>

       <li rel='<%#(Container.ItemIndex + 1).ToString() %>'> <img src="<%# Eval("Path") %>" width="50" height="50" /></li>
    </ItemTemplate> 

    <SeparatorTemplate>  

    </SeparatorTemplate> 
</asp:Repeater>

            </ul>
        </div>
        </div>
        <div class='clearfix'></div>
        <div id='push'></div>
    </div>

<script type="text/javascript">
        var currentImage;
        var currentIndex = -1;
        var interval;

        function showImage(index) {        
                if (index < $('#bigPic img').length) {
                    var indexImage = $('#bigPic img')[index]
                    if (currentImage) {
                        if (currentImage != indexImage) {
                            $(currentImage).css('z-index', 2);
                            clearTimeout(myTimer);
                            $(currentImage).fadeOut(0, function () {
                                myTimer = setTimeout("showNext()", 5000);
                                $(this).css({ 'display': 'none', 'z-index': 1 })                                
                            });
                        }
                    }
                    $(indexImage).css({ 'display': 'block', 'opacity': 1 });
                    currentImage = indexImage;
                    currentIndex = index;
                    $('#thumbs li').removeClass('active');
                    $($('#thumbs li')[index]).addClass('active');
                }           
            }                 
        function showNext() {
            var len = $('#bigPic img').length;
            var next = currentIndex < (len - 1) ? currentIndex + 1 : 0;
            showImage(next);
        }


        var myTimer;

        $(document).ready(function () {


                myTimer = setTimeout("showNext()", 5000);
                showNext(); //loads first image 

            //$('#thumbs li').bind('click', function (e) {
            //        var count = $(this).attr('rel');
            //        showImage(parseInt(count) - 1);

            //  });
                $('#thumbs li').bind('mouseenter', function (e) {

                var count = $(this).attr('rel');
                showImage(parseInt(count) - 1);                             
                document.getElementsById('thumbs')[0].style['transition-delay'] = '0.2s';

                });          
        });
    </script>

#push {
    height: 14px; /* .push must be the same height as .footer */
    padding-top:0px;
}
#wrapper{
    width:675px;

    height: auto !important;
    height: 96%;
    text-align:left;
    /*margin: 0 auto -30px;*/
    /*padding:0 10px 0px 10px;*/
}

.clearfix{
    clear:both;
    float:none;
}
#bigPic{
    width:665px;
    height:300px;

    border:1px solid #CCC;
    background-color:#FFF;
    margin-bottom:0px;
}
#bigPic img{
    position:absolute;
    display:none;
}

#MainPic{
    width:665px;
    height:300px;
    float:right;
    border:1px solid #CCC;
    background-color:#FFF;
    margin-bottom:0px;
}
#MainPic img{
    position:absolute;
    display:none;
}
ul#thumbs li.active{
    background: transparent url(/img/newbannerimage2/icon-uparrowsmallwhite.png)top center no-repeat ;
  text-align:center;
    /*border:1px solid #000;*/
    /*padding:2px;*/
    padding-top: 8px;
}
ul#thumbs, ul#thumbs li{
        /*margin:0;
    padding:0;*/
    list-style:none;
    text-align:center;

}

ul#thumbs li{
    float:left;
margin-right: 3.99px;
    margin-bottom:5px;
    /*border:1px solid #CCC*/;  
    /*padding:2px;*/
    padding-top: 8px;
    cursor:pointer;

}
ul#thumbs img{
    float:left;
    width:50px;
    height:50px;
    line-height:80px;
    overflow:hidden;
    position:relative;
    z-index:1;  
    border:1px solid #cecece;   

}