Jquery旋转木马与褪色文本

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

通过单击“下一步”导航箭头，文本标题应首先淡出，然后图像块应向左滑动。 图像块滑动 – 下一个标题淡入。

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

你能告诉我任何有用的jquery插件或者这样做的方法吗？

嘿试试这个代码。

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('
').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('Move left').append('Move right'); // 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代码是

     
      I need some he file. I have normal javascript, as well as Jquery. Here  
    I to move it to it's own file. I have normal javascript, as well as Jquery. Here  
    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  
   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  
   I need some help with this.. have normal javascript, as well as Jquery. Here  
 
  1 2  3 4 5