Question

我有一个带有小缩略图的旋转木马。我正在添加一个.isActive类来显示隐藏的＆lt; div＆gt;位于每个缩略图上方。我可以从第一个缩略图＆lt; div＆gt;中删除.isActive类。当旋转木马第一次滑动时。但我无法将.isActive添加到下一个＆lt; div＆gt;

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

这是一个小提琴：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创建但你可以创建任何你想要的东西

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

1 个答案: