JQuery Image滑块从json加载图片

I am using a JQuery plugin tiksluscarousel. It works fines for static html code. which is shown in .

我正在使用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});
    });  
});

Then i want to load images from a JSON. Then the slider effects gone. which is

然后我想从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});       
    });
});

I can not find the reason why the effect gone. Please help me.

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

1 个解决方案

#1

var node = document.getElementById("fruits1") will return the div not the ul. you have to append the li to the ul child of div.

var node = document.getElementById(“fruits1”)将返回div而不是ul。你必须把李附加到div的ul子。

try

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

instead of var node = document.getElementById("fruits1")

而不是var node = document.getElementById(“fruits1”)

hope this helps.

希望这可以帮助。

1 个解决方案

#1

更多相关文章

随机推荐