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

使用jquery / javascript动画滑块

1 个答案: