Jquery旋转木马与淡出文字

Question

Picrelated是我正在努力的旋转木马。

通过点击“下一步”导航箭头，文字说明应该先消失，然后图像块应该向左滑动。当图像块滑动时 - 下一个字幕淡入。

我试过使用Nivo Slider和BX Slider，但是永久失败。

你可以建议我任何有用的jQuery插件或方式来做到这一点？

Answer 1

嘿试试看下面的代码。

<style> 
    #slideshow #slidesContainer 
    { 
     margin: 0 auto; 
     width: 300px; 
     height: 263px; 
     overflow: auto; /* allow scrollbar */ 
     position: relative; 
    } 

    #slideshow #slidesContainer .slide 
    { 
     margin: 0 auto; 
     width: 300px; /* reduce by 20 pixels to avoid horizontal scroll */ 
     height: 263px; 
     display: none; 
    } 
    #slideshow #slidesContainer .slide img 
    { 
     margin: 0 auto; 
     width: 290px; /* reduce by 20 pixels to avoid horizontal scroll */ 
     height: 263px; 
    } 


    /** 
    * Slideshow controls style rules. 
    */ 
    .control 
    { 
     display: block; 
     width: 39px; 
     height: 263px; 
     text-indent: -10000px; 
     position: absolute; 
     cursor: pointer; 
    } 
    #leftControl 
    { 
     top: 0; 
     left: 0; 
     background: transparent url(http://cdn1.iconfinder.com/data/icons/fs-icons-  ubuntu-by-franksouza-/128/go-previous.png) no-repeat 0 0; 
    } 
    #rightControl 
    { 
     top: 0; 
     right: 0; 
     background: transparent url(http://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/sq_br_next.png) no-repeat 0 0; 
    } 
    .active 
    { 
     color: red; 
    } 
</style> 

JS代码是

$(document).ready(function() { 
     var currentPosition = 0; 
     var slideWidth = 300; 
     var slides = $('.slide'); 
     var numberOfSlides = slides.length; 
     var timer = 3000; 
     var img1, img2; 
     var sliderLink = $("#slider a"); 
     var direction = 1; 
     // Remove scrollbar in JS 
     $('#slidesContainer').css('overflow', 'hidden'); 

     // Wrap all .slides with #slideInner // Float left to display horizontally, readjust .slides width 
     slides.wrapAll('<div id="slideInner"></div>').css({ 
      'float': 'left', 
      'width': slideWidth 
     }); 

     // Set #slideInner width equal to total width of all slides 
     $('#slideInner').css('width', slideWidth * numberOfSlides); 

     // Insert left and right arrow controls in the DOM 
     $('#slideshow').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>'); 

     // Hide left arrow control on first load 
     // manageControls(currentPosition); 
     // manageSlide(); 
     // Create event listeners for .controls clicks 
     $('#rightControl').bind('click', rightControl); 
     $('#leftControl').bind('click', leftControl); 
     function leftControl() { 
      var butonid = 0; 
      direction = 0; 
      $("#slideInner").stop(); 
      $("#slideInner").dequeue(); 
      $('#timer').stop(); 
      $('#timer').dequeue(); 
      $('#leftControl').unbind('click'); 

      manageSlide(0, direction); 
      setTimeout(function() { 

       $('#leftControl').bind('click', leftControl); 
      }, timer, null); 


     } 
     function rightControl() { 
      var butonid = 1; 
      direction = 1; 
      $("#slideInner").stop(); 
      $("#slideInner").dequeue(); 
      $('#timer').stop(); 
      $('#timer').dequeue(); 
      $('#rightControl').unbind('click'); 

      manageSlide(0, direction); 
      setTimeout(function() { 

       $('#rightControl').bind('click', rightControl); 
      }, timer, null); 

     } 

     var slideIndex = 0; 
     var data = $("#slideInner .slide").toArray(); 
     $("#slideInner").empty(); 
     function manageSlide(auto, idButtonid) { 

      $("#slideInner").empty(); 


      // console.log(slideIndex); 

      if (idButtonid == 0) { 

       $("#slideInner").css({ 'marginLeft': "-300px" }); 
       $(data).each(function (index) { 
        //      if (index == slideIndex - 1) { 
        //       $(this).show(); 
        //      } else { 
        $(this).hide(); 
        // } 
       }); 
       $(data[slideIndex - 1]).show(); 
       if (slideIndex == numberOfSlides - 1) { 
        slideIndex = 0; 
        img1 = data[0]; 
        img2 = data[numberOfSlides - 1]; 

        $("#slideInner").append(img1); 
        $("#slideInner").append(img2); 
        $(img2).show(); 
        $(img1).show(); 

       } else { 
        img1 = data[slideIndex]; 
        img2 = data[slideIndex + 1]; 
        $("#slideInner").append(img2); 
        $("#slideInner").append(img1); 

        $(img1).show(); 
        $(img2).show(); 
        slideIndex = slideIndex + 1; 
       } 



       $('#slideInner').animate({ 
        'marginLeft': "0px" 
       }, 'slow', function() { 
        $('#timer').animate({ 
         opacity: 1 
        }, timer, function() { 
         console.log('leftControl'); 
         manageSlide(1, direction); 
        }); 

       }); 
      } 

      // right move here 
      else if (idButtonid == 1) { 
       $("#slideInner").css({ 'marginLeft': "0px" }); 
       $(data).each(function (index) { 
        if (index == slideIndex + 1) { 
         $(this).show(); 
        } else { 
         $(this).hide(); 
        } 
       }); 
       if (slideIndex == numberOfSlides - 1) { 
        slideIndex = 0; 
        img1 = data[0]; 
        img2 = data[numberOfSlides - 1]; 
        $("#slideInner").append(img2); 
        $("#slideInner").append(img1); 
        $(img2).show(); 
        $(img1).show(); 

       } else { 
        img1 = data[slideIndex]; 
        img2 = data[slideIndex + 1]; 
        $("#slideInner").append(img1); 
        $("#slideInner").append(img2); 
        $(img1).show(); 
        $(img2).show(); 
        slideIndex = slideIndex + 1; 
       } 

       $('#slideInner').animate({ 
        'marginLeft': slideWidth * (-1) 
       }, 'slow', function() { 
        console.log('rightControl'); 
        $('#timer').animate({ 
         opacity: 1 
        }, timer, function() { 
         manageSlide(1, direction); 
        }); 

       }); 
      } 


      if (auto == 1) { 


       sliderLink.each(function() { 
        $(this).removeClass(); 
        if ($(this).text() == (slideIndex + 1)) { 

         $(this).addClass('active'); 
        } 

       }); 
      } 
      auto = 1; 

     } 



     $("#slider a").click(function() { 

      sliderLink.each(function() { 
       $(this).removeClass(); 
      }); 
      slideIndex = $(this).addClass('active').text() - 1; 
      $('#timer').stop(); 
      $('#timer').dequeue(); 
      $("#slideInner").stop(); 
      $("#slideInner").dequeue(); 
      manageSlide(0, direction); 
     }); 

     manageSlide(1, direction); 
    }); 

HTML代码

<body> 
<div style="width: 560; overflow: hidden" align="center"> 
    <!-- Slideshow HTML --> 
    <div id="timer"> 
    </div> 
    <div id="slideshow"> 
     <div id="slidesContainer"> 
      <div class="slide"> 
       <!-- Content for slide 1 goes here --> 
       <img src="http://www.themobileindian.com/images/nnews/2012/10/8999/Apple-logo.jpg" /> 
       <span>I need some he file. I have normal javascript, as well as Jquery. Here </span> 
      </div> 
      <div class="slide"> 
       <!-- Content for slide 2 goes here. --> 
       <img src="http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg"> 
       <span>I to move it to it's own file. I have normal javascript, as well as Jquery. Here 
       </span> 
      </div> 
      <div class="slide"> 
       <!-- Content for slide 3 goes here. --> 
       <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSnyrnGRAcKu3bY2bLUiCDnPetbKT97o892huSfYQv148ERpRFJ" /> 
       <span>I need some help with this... I wrote all of my javascript code within the .html 
        file withing the brackets. I need to move it to it's own file. I have normal javascript, 
        as well as Jquery. Here </span> 
      </div> 
      <div class="slide"> 
       <img src="http://i.livescience.com/images/i/000/034/622/i02/bioscapes3.jpg" /> 
       <span>within the .html file withing the brackets. I need to move it to it's own file. 
        I have normal javascript, as well as Jquery. Here </span> 
      </div> 
      <div class="slide"> 
       <img src="http://www.thinkstockphotos.in/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg" /> 
       <span>I need some help with this.. have normal javascript, as well as Jquery. Here 
       </span> 
      </div> 
     </div> 
     <div id="slider"> 
      <a href="javascript:void(0)">1</a> <a href="javascript:void(0)">2</a> <a href="javascript:void(0)"> 
       3</a> <a href="javascript:void(0)">4</a> <a href="javascript:void(0)">5</a> 
     </div> 
    </div> 
    <!-- Slideshow HTML --> 
</div> 

对于演示请浏览这里.... See Demo