Question

我正在使用JQuery插件tiksluscarousel。它对静态HTML代码起作用。这显示在。

<div id="fruits">
    <ul>
        <li><img src="http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits1.jpg" /></li>
        <li><img src="http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits2.jpg" /></li>
        <li><img src="http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits3.jpg" /></li>
        <li><img src="http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits4.jpg" /></li>  
    </ul>
</div>
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {  

    jQuery(document).ready(function(){
        $("#fruits").tiksluscarousel({width:640,height:480,nav:'thumbnails',current:1});
    });  
});

然后我想从JSON加载图像。然后滑块效果消失了。

<div id="fruits1"></div>
var data = {"data": [{ 
        "name": "Nike air foamposite \"hyper colbalt/ben gordan\" pre order 8/26",
        "imagepath": "http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits3.jpg"
    },
    { 
        "name": "Nike air foamposite \"hyper colbalt/ben gordan\" pre order 8/26",
        "imagepath": "http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits2.jpg"
    },
    { 
        "name": "Nike air foamposite \"hyper colbalt/ben gordan\" pre order 8/26",
        "imagepath": "http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits1.jpg"
    },
    { 
        "name": "Nike air foamposite \"hyper colbalt/ben gordan\" pre order 8/26",
        "imagepath": "http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits4.jpg"
    } 
]}  
var node = document.getElementById("fruits1") 
for (var i in data.data) {   
    var newItem = document.createElement("li");  
    var img = document.createElement("img");
    img.src = data.data[i].imagepath;  
    newItem.appendChild(img);    
    node.appendChild(newItem);   
}

$('.page-content-area').ace_ajax('loadScripts', scripts, function() {  

    jQuery(document).ready(function(){ 

$("#fruits1").tiksluscarousel({width:640,height:480,nav:'thumbnails',current:1});       
    });
});

我找不到效果消失的原因。请帮我。

Answer 1

var node = document.getElementById("fruits1")将返回div而不是ul。您必须将li附加到ul的{{1}}子项。

试

div

而不是var node = document.getElementById("fruits1").child[0];

希望这会有所帮助。

JQuery Image滑块从json加载图片

1 个答案: