1

您好我正在尝试将本地文件中的 json 数据显示到水平滑块中。如果我像下面的幻灯片那样静态保存图像,效果很好。

<ul id="slider_th">
            <li><img id="1" src="assets/img/employee/1.jpg" width="135" height="135" alt=""></li>
            <li><img id="2" src="assets/img/employee/2.jpg" width="135" height="135" alt=""></li>
            <li><img id="3" src="assets/img/employee/3.jpg" width="135" height="135" alt=""></li>
            <li><img id="4" src="assets/img/employee/4.jpg" width="135" height="135" alt=""></li>
            <li><img id="5" src="assets/img/employee/5.jpg" width="135" height="135" alt=""></li>
            <li><img id="6" src="assets/img/employee/6.jpg" width="135" height="135" alt=""></li>
</ul>

现在我正在尝试使用 JQuery 一次显示来自本地 json 文件的数据,如下所示 5 张图像。但我有 6 张图片要展示。来了,我有两个问题。

  1. 我可以在 JQuery 中使用 slice 方法显示 5 张图像。但是滑块不起作用。

  2. 在第 6 张图片之后,我需要显示前 4 张图片。我的意思是循环它应该运行。

     $.getJSON( "assets/js/data.json" , function( result ){
    $.each(result.employees.employee.slice(0,5), function(key, field){
        $('#slider_th').append('<li style="overflow: hidden; float: left; width: 141px; height: 144px;"><img id="emp_image_'+field.id+'" src="'+field.image+'" width="135" height="135" alt="'+field.name+'">');            
    });
     });
    

如何制作圆形滑块和我正在使用的另一件事

jcarouselite_1.0.1.pack.js

JQuery 中的插件

4

0 回答 0