Question

我正在尝试制作图片幻灯片。到目前为止，我已设法开发以下代码。问题是以下代码仅显示第一个图像。页面加载完成后，第一张图像从左侧完美显示，几秒钟后逐渐消失，然后其余图像不显示。

你能告诉我如何一个接一个地显示其余的图像吗？

<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>

Answer 1

看看你是否正在寻找： -

Fiddle

   $(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);
            });
        });
    }
});

Answer 2

所以听起来你正试图按顺序显示图像。有几种方法可以做到这一点。这是一个：

$(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();
});

jQuery幻灯片 - 第一个之后的图像没有显示

2 个答案:

Fiddle