javascript - 如何在磁通滑块中添加或删除图像

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

    window.myFlux = $（'＃slider'）。flux（{
        自动播放：假，
        分页：错误，
        onTransitionEnd：函数（数据）{
            //如果结束，则加载更多图片
            // window.myFlux.addImages（...）
            // window.myFlux.remove（...一些旧图像...）
        }
    }）;

    $（document）.keydown（function（e）{
        切换（e.which）{
            案例39：//对
            window.myFlux.next（）;
            打破;
        }
    }）;


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

最佳答案

$(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;
    }

});