使用 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