使用jquery的動畫滑塊/ javascript

Question

我正在更新公司主頁上的滑塊。原來的滑塊有點老，動畫不是很流暢，尤其是當用戶從第一張幻燈片到最後一張時，或者相反。

我有滑塊工作得很好，但似乎不能讓任何動畫工作。我對動畫沒有太多的工作，所以任何幫助都會很棒。該公司希望動畫能夠從右向左滑動。

var slideData = [ 
{ 
    title : "Title Slide 1", 
    timeout : 7, 
    layout : "slider-left", 
    description : "Caption Slide 1", 
    type : "image", 
    img : "/images/banners/img1.jpg", 
    url : "/url1" 
}, 
{ 
    title : "Title Slide 2", 
    timeout : 7, 
    layout : "slider-left", 
    description : "Caption Slide 2", 
    type : "image", 
    img : "/images/banners/img2.jpg", 
    url : "/url2" 
}, 
{ 
    title : "Title Slide 3", 
    timeout : 7, 
    layout : "slider-left", 
    description : "Caption Slide 3", 
    type : "image", 
    img : "/images/banners/img3.jpg", 
    url : "/url3" 
}]; 



var fSlider = (function(slideData, containerID){ 

var slides = [], slides_Data = []; 
var container = null;  // Sliding container 
var main = null;  // Main container - holds sliding container 
var currentSlide = 0;  // Current position in slide 
var offset = 770;   // X offset of container 
var timer = 0;   // Timer to auto-advance next slide. 
var width=768;   // Width of each slide  
var endSlide = false; 

//=============================== 
// initialize 
// builds and starts slider 
//=============================== 
function init(){ 
    slides_Data = slideData; 
    container = $(containerID); 
    main = $("#main-slider"); 

    buildSlides(); 
    buildControls(); 

    slides = document.getElementsByClassName("slider"); 

    setTimeOut(); 
} 

//=============================== 
// Increment and show next slide 
//=============================== 
function slideNext(){ 
    var i; 
    cancelTimeOut(); 
    //slideout(); 
    if(currentSlide >= slides.length-1){ 
     currentSlide = 0; 
     //endSlide = true; 
    }else { 
     currentSlide++; 
    } 
    for(i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 

    slides[currentSlide].style.display = "block"; 

    //setPositions(offset); 
    setTimeOut(); 
} 

//=============================== 
// Decrement and show previous slide 
//=============================== 
function slidePrevious(){ 
    var i; 
    cancelTimeOut(); 
    if(currentSlide <= 0){ 
     currentSlide = slides.length-1; 
     endSlide = true; 
    }else { 
     currentSlide--; 
    } 
    for(i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 

    slides[currentSlide].style.display = "block"; 

    //setPositions(offset); 
    setTimeOut(); 
} 

//=============================== 
// Update sliding container offset 
//=============================== 
function setPositions(offset){ 
    $("html.cssanimations " + containerID).css("transform" , "translateX(" + (-offset) + "px)"); 
    $("html.cssanimations " + containerID).css("-webkit-transform" , "translateX(" + (-offset) + "px)"); 
    $("html.cssanimations " + containerID).css("-moz-transform" , "translateX(" + (-offset) + "px)"); 
    $("html.cssanimations " + containerID).css("-ms-transform" , "translateX(" + (-offset) + "px)"); 
    $("html.cssanimations " + containerID).css("-o-transform" , "translateX(" + (-offset) + "px)"); 
    $("html.no-cssanimations " + containerID).animate({left: -offset}, 350); 
} 

//=============================== 
// Set timer for next slide 
//=============================== 
function setTimeOut(){ 
    timer=setTimeout(slideNext, slides_Data[currentSlide].timeout * 1000); 
} 

//=============================== 
// Clear timer 
//=============================== 
function cancelTimeOut(){ 
    clearTimeout(timer); 
} 

//=============================== 
// Use Slide Data to create html/css for slides 
//=============================== 
function buildSlides(){ 
    var sliderDiv = document.getElementById("slider-mask"); 

    for(var i = 0; i < slides_Data.length; i++) { 
     sliderDiv.innerHTML = sliderDiv.innerHTML + '<div class="slider ' + slides_Data[i].layout + '"' + 
     'style="background-image: url(' + slides_Data[i].img + ');">' + 
     '<div><h3><a href="' + slides_Data[i].url + '">' + slides_Data[i].title + '</a></h3>' + 
     '<p>' + slides_Data[i].description + '</p></div></div>'; 
    } 

    sliderDiv.innerHTML = sliderDiv.innerHTML + '<a id="btn-next" href="#">&#x025B8;</a>' + 
          '<a id="btn-previous" href="#">&#x025C2;</a>'; 
} 

//=============================== 
// Create and attach event listeners 
// to button/navigation controls 
//=============================== 
function buildControls(){ 

    var nextButton = document.getElementById("btn-next"); 
    var previousButton = document.getElementById("btn-previous"); 

    nextButton.addEventListener('click', slideNext); 
    previousButton.addEventListener('click', slidePrevious); 
} 

// Public 
return {init:init}; 

}(slideData, '#slider-mask')); 

這是我使用已經從原來的滑塊代碼修改的代碼，並且動畫將要使用setPositions（）函數來設定。就像我說的那樣，滑塊工作得很好，我無法正確地獲得動畫。

Answer 1

如果您正在更新，可能需要查看新的滑塊，而不是嘗試修復損壞的滑塊。

這一個是相當不錯的，但有更多的在那裏工作的箱子有很多選項！

http://bxslider.com