如何从 brazzers-сarousel 解析 json 文件？

Question

我是 javascript 的新手，正在尝试使用 brazzersCarousel 将我的文件从 json 导入到 html 页面，但我所得到的只是显示一张图片，另一个不显示或两个图像都显示但在 table.

中

brazzers-Carousel js

!function(a){
    a.fn.brazzersCarousel=function(){
        return this.addClass("brazzers-daddy").append("<div class='tmb-wrap'><div class='tmb-wrap-table'>").append("<div class='image-wrap'>").each(function(){
            var e=a(this);
            e.find("img").appendTo(e.find(".image-wrap")).each(function(){
                e.find(".tmb-wrap-table").append("<div>")})}).find(".tmb-wrap-table").bind("touchmove",function(e){
            e.preventDefault();
            var i=e.originalEvent.changedTouches[0],t=document.elementFromPoint(i.clientX,i.clientY),d=a(t).parent(".tmb-wrap-table").closest(".brazzers-daddy").find("img"),n=a(t).parent(".tmb-wrap-table").find("div");
            d.hide().eq(a(t).index()).css("display","block"),n.removeClass("active"),a(t).addClass("active")}).find("div").hover(function(){
                var e=a(this).parent(".tmb-wrap-table").closest(".brazzers-daddy").find("img"),i=a(this).parent(".tmb-wrap-table").find("div");
                e.hide().eq(a(this).index()).css("display","block"),i.removeClass("active"),a(this).addClass("active")}).parent().find(":first").addClass("active")}}(jQuery);

我的 html, js & brazzers 轮播 css 代码

<head>    
    <style type="text/css">
    <!--Brazzers Carousel css code!-->
     .brazzers-daddy:after {content: ""; display: table; clear: both;}
    .brazzers-daddy {position: relative;}
    .brazzers-daddy img {width: 100%; position: relative; display: none; top: 0; left: 0; margin-bottom: 10px;}
    .brazzers-daddy img:first-child {display: block;}
    .tmb-wrap {position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;}
    .tmb-wrap .tmb-wrap-table {display: table; height: 100%; width: 100%;}
    .tmb-wrap-table div {display: table-cell;transition: all .3s ease; border-bottom: 5px solid transparent; padding-top: 10px; -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease;}
    </style>
</head>
<body>
    <div class="thumb-item">
    </div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src='jQuery.Brazzers-Carousel.min.js'></script>
<script type="text/javascript">

    $(document).ready(function () {
        $.getJSON("photo.json", function (data) {
            var urldata = [];
            $.each(data, function (index, value) {
                    urldata.push(value);       // Push values in the array.
                    $(".image-wrap").append("<img src='"+value.photo1+"'/ >")
                    $(".image-wrap").append("<img src='"+value.photo2+"'/ >")

                });

        });
    });
    $(".thumb-item").brazzersCarousel();

</script>
</body>

Answer 1

你的代码有点倒退，你需要将你的 img 标签附加到你的 html 然后调用 brazzersCarousel() - 不要创建轮播然后尝试附加图片。

类似

$(document).ready(function () {
    $.getJSON("photo.json", function (data) {
        $.each(data, function (index, value) {
            $(".thumb-item").append("<img src='"+value.photo1+"'/ >")
        });
        $(".thumb-item").brazzersCarousel();
    });
});

如何从 brazzers-сarousel 解析 json 文件？

how to parse json file from the brazzers-сarousel?

html

javascript

json

image

carousel