0

我有一个带有缩略图库的旋转木马。当用户单击缩略图库中的图像时，我希望能够在轮播中设置图像。我通过将适当的项目设置为“活动”来使其工作，但它不使用任何引导转换，因此图像突然出现。我有什么办法可以添加幻灯片动画吗？

带有缩略图库（右侧）的轮播（左侧）： 在此处输入图像描述

javascript

    <script type="text/javascript">
      // go to image in carousel
        function setCarousel(carouselID, image){
          $('.carousel.'+carouselID+' .item.active').removeClass('active');
          $('.carousel.'+carouselID + ' div:nth-child('+image+')').addClass('active');
        }

        // set photo to active in carousel when thumbnail is clicked
        $('.thumbGallery img').click(function(){
          var parent = $(this).attr("data-parent");
          var position = parseInt($(this).attr("data-position"))+1;
          console.log("parent: " + parent);
          console.log("position: " + position);

          // slide to the element in the slideshow
          setCarousel(parent, position);

        });    
</script>

轮播html：

<div id="detailViewPhoto">
       <div class="mainPhoto carousel slide 523" id="carousel-523">
           <div class="carousel-inner 523 active">
                <div class="item active">       
                    <a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/imagePath/897/2013-06-18_08.25.02.jpg" rel="gallery 523"> 
                     <img alt="Preview_2013-06-18_08.25.02" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/897/preview_2013-06-18_08.25.02.jpg" width="100%">
                    </a>
                </div>
                <div class="item">
                   <a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/imagePath/898/2013-06-18_08.24.07.jpg" rel="gallery 523"> 
                   <img alt="Preview_2013-06-18_08.24.07" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/898/preview_2013-06-18_08.24.07.jpg" width="100%">
                   </a>
               </div>
            </div>
            <a class="carousel-control left" href="#carousel-523" data-slide="prev" style="display: none;">‹&lt;/a>
             <a class="carousel-control right" href="#carousel-523" data-slide="next" style="display: none;">›&lt;/a>
       </div>

       <div class="thumbGallery 523">
          <img alt="Thumb_2013-06-18_08.25.02" data-parent="523" data-position="0" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/897/thumb_2013-06-18_08.25.02.jpg" style="padding: 4px; border: 1px solid rgb(204, 204, 204); max-width: 85%; cursor: default;">
         <img alt="Thumb_2013-06-18_08.24.07" data-parent="523" data-position="1" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/898/thumb_2013-06-18_08.24.07.jpg" style="padding: 4px; border: 1px solid rgb(204, 204, 204); max-width: 85%; cursor: default;">
       </div>

  </div>
4

1 回答 1

3

原来有一个默认的轮播方法可以做到这一点。它是 $('.carousel').carousel(number) 其中 number 是您要循环到的项目。嗬！

于 2013-07-05T14:31:38.050 回答