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>

今、私は一度に5つの画像のようにJQueryを使用してローカルjsonファイルからデータを表示しようとしています. しかし、表示する画像が 6 枚ありました。ここに来て、2つの問題があります。

  1. JQuery でスライス メソッドを使用して 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+'">');            
    });
     });
    

スライダーを円形にする方法と、私が使用しているもう1つのこと

jcarousellite_1.0.1.pack.js

JQuery のプラグイン

4

0 に答える 0