0

画像スライドショーを作成しようとしています。これまでのところ、次のコードを開発することができました。問題は、次のコードが最初の画像のみを表示することです。ページの読み込みが完了すると、最初の画像が左から完全に表示され、数秒後に消え、残りの画像が表示されなくなります。

残りの画像を次々と表示する方法を教えてください。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
<script>
    $(document).ready(function(){   
        $(".slider img").each(function() { 
            $(this).show("slide",{direction:'right'},1000);
            $(this).delay(5500).hide("slide",{direction:'left'},1000);  
        });
    });
</script>

<div class="slider">
    <img src="slideshow/1.jpg"  />
    <img src="slideshow/2.jpg"  />
    <img src="slideshow/4.jpg"  />
</div>

CSS

<style>
 .slider{
  width: 980px;
  height:362px;
  overflow:hidden;
  margin: 30px auto;
  background-image:url(slideshow/ajax-loader.gif);
  background-repeat:no-repeat;
  background-position:center;

 }
.slider img {
 display:none;
 }
</style>
4

2 に答える 2

1

これがあなたが探しているものかどうかを確認してください:-

フィドル

   $(function () {
    var imgArr = $('img').get(); // get the images in an array
    slide(); // invoke slide initially

    function slide() {

        var img = imgArr.shift(); //get the first image from the array
        imgArr.push(img); //push it back to the array for the cycle to happen
        $(img).show('slide', {
            direction: 'right'
        }, 1000, function () { //give image slide in in the call back of show
            $(this).delay(500).hide("slide", {
                direction: 'left'
            }, 1000, function () { // in the call back of hide call slide again.
                window.setTimeout(slide, 10);
            });
        });
    }
});
于 2013-05-15T21:23:41.933 に答える
0

そのため、画像を順番に表示しようとしているようです。それを行うにはいくつかの方法があります。ここに1つあります：

$(document).ready(function() {
    var images = $('.slider img').hide();
    var current = 1;

    setInterval(function() {
       images.eq(current).hide("slide", {direction:'left'}, 1000);
       current = (current + 1) % images.length;
       images.eq(current).show("slide", {direction:'right'}, 1000);
    }, 5500);

    images.first().show();
});
于 2013-05-15T21:30:20.407 に答える