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

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

$(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 回答