旋转木马缩略图，添加类到下一个旋转木马旋转

Question

下一个LI我有一个旋转木马下面有小缩略图。我添加了一个.isActive类来显示位于每个缩略图上方的隐藏的< div>。当传送带第一次滑动时，我可以从第一个缩略图< div>中删除.isActive类。但我无法将.isActive添加到下一个< div>

如何匹配选定的缩略图和相应的幻灯片？

这里是一个小提琴：http://jsfiddle.net/gybYP/

这里是我的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 --> 

这里是我的CSS：

.clearfix:before, 
.clearfix:after { 
    content: ""; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
} 

.slidesContainer { 
    width:200px; 
    height: 200px; 
    overflow: hidden; 
    margin-bottom: 10px; 
} 

.slidesContainer ul { 
    margin: 0; 
    padding: 0; 
    width: 600px; /* Slides width times total slides */ 
    position: relative; 
    top: 0; 
    left: 0; 
    list-style:none; 
} 

.slide { 
    width: 200px; 
    height: 200px; 
    float: left; 
} 

.green {background-color: green;} 
.blue {background-color: blue;} 
.red {background-color: red;} 

.thumbnailContainer ul { 
    margin: 0; 
    padding: 0; 
    width: 600px; /* Slides width times total slides */ 
    position: relative; 
    top: 0; 
    left: 0; 
    list-style:none; 
} 
.thumb { 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
    position: relative; 
} 

.thumbOverlay { 
    background-color: gray; 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    top: 30%; 
    left: 30%; 
    display: none; 
} 

.thumbOverlay.isActive { 
    display: block; 
} 

这里是我的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}); 

    } 
    ); 

} 

Answer 1

//对于大图像

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

ASPX：

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

脚本侧与jquery-1.4.1.min.js或更大

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

的CSS边

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

} 

我repater创建，但您可以创建你想要