0

私の最初のスクリプトは、以下に示すようにランダムな画像を提供します

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
    var $t = jQuery.noConflict();
    $t(function () {
        $t('.slideshow').cycle({
            fx: 'fade' 
        });
    });
</script>

そのような画像を追加すると機能します

<div class="news_area_left">
     <div class="slideshow" style="position: relative; ">
        <img src="../../banner_image/nemo.jpg" width="154px" height="108px"/>
  <img src="../../banner_image/up.jpg" width="154px" height="108px" />

</div>
    </div>

しかし、あなたが見ることができるように画像を取得する私の2番目のスクリプトを追加すると

<script type="text/javascript">

    $(function () {

        $.ajax({
            type: "get", url: "Home/Oku", data: {}, dataType: "json",
            success: function (data) {

                for (var i = 0; i < data.length; i++) {

                   var newFirmDiv= $(' <img src="../../banner_image/' + data[i] + '" width="154px" height="108px"/>');
                    $(".slideshow").append(newFirmDiv);

                }
            }
        });
    });

</script>

最後に、「スライドショーdiv」で動的画像を使用しようとしましたが、効果が機能しません

<div class="news_area_left">
     <div class="slideshow" style="position: relative; ">
       </div>
    </div>
4

1 に答える 1

0

$t('.slideshow').cycle画像を動的に挿入した後に実行する必要があります。また、「firmShowCase」クラスではなく「slideshow」クラスに追加する必要があります。

私が作成したこのjsFiddleを参照してくださいhttp://jsfiddle.net/davew9999/sgUeq/

HTML

<div class="news_area_left">
     <div class="slideshow" style="position: relative; ">
         <img src="http://activephilosophy.files.wordpress.com/2009/09/number1.jpg" width="154px" height="108px"/>
         <img src="http://www.clker.com/cliparts/h/Y/i/C/Y/W/red-rounded-square-with-number-2-md.png" width="154px" height="108px"/>
     </div>
</div>​

JavaScript

var $t = jQuery.noConflict();

var newFirmDiv = $t('<img src="http://www.mosamuse.com/wp-content/uploads/2012/05/number3.png" width="154px" height="108px"/>');
$t(".slideshow").append(newFirmDiv);

var anotherDiv = $t('<img src="http://2.bp.blogspot.com/-_A_8UYb0zIQ/Te5lpI9iZ3I/AAAAAAABgWk/sErDyHjEhPw/s1600/number-4.jpg" width="154px" height="108px"/>');
$t(".slideshow").append(anotherDiv);

$t(function() {
    $t('.slideshow').cycle({
        fx: 'fade'
    });
});
于 2012-08-05T20:11:50.187 に答える