如何在MVC中为字符串64类型的图像创建幻灯片

Question

我在创建图像幻灯片时遇到了麻烦。从数据库中获取并绑定到视图模型中的图像。它工作得很好。现在我想用可用的图像创建幻灯片。我已经这样尝试过了。

$(function () {
        function loop() {
            $('.slider .inner-wrap').fadeIn("slow").css('marginLeft', 0).delay(2000)
            .animate({ "marginLeft": "-200px" }, 700).delay(2000)
                .animate({ "marginLeft": "-400px" }, 700).delay(2000)
                .fadeOut("slow", loop);
        }
        loop();
    });

 .slider {
        width: 200px;
        height: 200px;
        overflow: hidden;
        margin: 30px auto;
        background-image: url('http://www.thatssotrue.com/images/ajax_loader.gif');
        background-size: 50px 50px;
        background-position: center center;
        background-repeat: no-repeat;
    }
        .slider img {
            width: 200px;
            height: 200px;
        }
    .inner-wrap {
        width: 600px;
    }
    .item-1, .item-2, .item-3 {
        display: inline-block;
        vertical-align: top;
    } 

<tr>
                        <td>
                            <div class="slider">
                                <div class="inner-wrap">
                                    <img class=" item-1" id="slides" />
                                </div>
                                </div>                        
                        </td>
                    </tr>

这就是我绑定图像的方法

for (var i = 0; i < images.length; i++) {
                    var imgid = i;
                    var imagetemp = "<img id='" + imgid + "'style='margin:5px;cursor:zoom-in;width:200px;height: 150px;' onclick='getid(this)' src='" + clubimage[i] + "'>";// onclick='getid(this)'
                    var slider = "<img id='" + imgid + "'src='" + clubimage[i] + "'>";
                    $("#image").append(imagetemp);
                    $("#slides").append(slider);
                }

我的图像无法在这里显示。请帮帮我。谢谢

Answer 1

最后我已经实现了我的幻灯片在knockout js。完整的解决方案在这里。我的ajax响应。我在里面调用了swapImage()方法

 success: function (data) {
                image = JSON.parse(data.imageResult);
                self.bindimage(image);
                for (var i = 0; i < image.length; i++) {
                    var imgid = i;
                    var imagetemp = "<img id='" + imgid + "'style='margin:5px;cursor:zoom-in;width:200px;height: 150px;' onclick='getid(this)' src='" + image[i] + "'>";
                    var imgslide = "<li><img class='slides' style='margin:5px' src='" +image[i] + "'/></li>";
                    $("#image").append(imagetemp);
                }
                swapImage();
                if (data.imageResult == '"Invalid Connection"') {
                    alert("Invalid Connection");
                }

我创建了这样的javascript方法。

var i = 0;
    function swapImage() {
        var im = image[i];
        $("#imgslide").empty();
        var imgid = 'galimg' + i;
        var imagesilde = "<img id='" + imgid + "'style=width:500px;height:450px;'rel='alternate' src='" + image[i] + "'/>";
        $("#imgslide").fadeIn("slow", "swing");
        $("#imgslide").append(imagesilde);
        if (i < image.length - 1) i++; else i = 0;
        setTimeout('swapImage()', 3000);
    }

并像这样绑定到HTML标签。使用选择器

<div id="imgslide" />

最后我得到了我的要求。