こんにちは、ローカル ファイルの 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つの問題があります。
JQuery でスライス メソッドを使用して 5 つの画像を表示できます。しかし、スライダーは機能していません。
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 のプラグイン