javascript - 如何在 Flux slider 中添加或删除图像

Question

我想使用ajax加载https://github.com/joelambert/Flux-Slider中的新图像。像这样:

    window.myFlux = $('#slider').flux({        autoplay: false,        pagination: false,        onTransitionEnd: function(data) {            // if end, load more images            // window.myFlux.addImages(...)            // window.myFlux.remove( ... some old images... )        }    });    $(document).keydown(function(e) {        switch(e.which) {            case 39: // right            window.myFlux.next();            break;        }    });

有什么解决办法吗？请帮忙。

Answer 1

$(function(){

   var count=0;//for test,provides text to placehold images to be different

    $flux = new flux.slider('#slider', {
        autoplay: false,
        pagination: false,
        onTransitionEnd: function(data) {

            count++;//for test,provides text 
                    //for placehold images to be different

            //Image/s is added each time the animation is complete                                    
            addImage('http://placehold.it/750x500&text='+count+'/1');
            addImage('http://placehold.it/750x500&text='+count+'/2');                            
            //addImage('http://placehold.it/750x500&text='+count+'/3');

            //images can not be removed in an easy way 
            //because it disrupts the order of occurrence and transformation
        }
    });


    $(document).keydown(function(e) {
        switch(e.which) {
            case 39: // right
            $flux.next();
            break;
        }
    });

    function addImage(src)
    {
        //crate img object
        var img = document.createElement("IMG");
        img.setAttribute("src", src);

        $flux.images.push(img );                    

        //add image to slider
        var image = new Image();
        image.onload = function() 
        {
            $flux.imageLoadedCount++;
            $flux.finishedLoading();
            $flux.setupImages();
        };

        // Load the image to ensure its cached by the browser
        image.src = src;
    }

});