如何解析json文件从brazzers- <s:1> arousel?



我是新的javascript和尝试导入我的文件从json到html页面与brazzersCarousel,但所有我得到的是显示一个图像,另一个不是显示或两个图像显示,但在一个表。

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);   

my html, js &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>

你的代码有点向后,你需要将你的img标签附加到你的html,然后调用brazzersCarousel()-而不是创建carousel,然后尝试将图像附加到它。

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

最新更新