javascript - jQuery 自动滚动图像

Question

我正在为我为 friend 设计的网站创建一个简单的小幻灯片。到目前为止，我可以通过单击图像来显示/隐藏相应的图像来完美地工作。我试图让它自动滚动图像，但它似乎不起作用。这是我的代码:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show();

  $('.slide2').click(function()
  { 
    $('.slide2t').show();
    $('.slide1t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide1').click(function()
  { 
    $('.slide1t').show();
    $('.slide2t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide3').click(function()
  { 
    $('.slide3t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide4t').hide();
  });
  $('.slide4').click(function()
  { 
    $('.slide4t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide3t').hide();
  });
});

</script>

这是我用来在单击时隐藏/显示图像的代码。可以使用切换来缩短这个时间吗？

这就是我试图让它们自动滚动的方法:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show([1000]),
  $('.slide1t').hide(),
  $('.slide2t').show([1000]),
  $('.slide21t').hide(),
  $('.slide3t').show([1000]),
  $('.slide3t').hide(),
  $('.slide4t').show([1000]),
  $('.slide4t').hide()
});

</script>

我尝试了同一代码的其他方面，试图让它做一些事情，但没有成功。

<div id="slideshow">

        <div class="text"> 
            <a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
            <a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a> 
            <a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a> 
            <a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
        </div>

        <div class="image">        
            <a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
            <a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
            <a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
            <a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
        </div>

    </div>

我查看了文档，发现您可以使用 .show([duration],[easing],[callback]) 但我真的不知道要在其中输入什么。

谢谢大家

Answer 1

您是否正在制作幻灯片，可以看到当前幻灯片左侧和右侧的上一张和下一张幻灯片，或者只是一张幻灯片淡入另一张幻灯片？

如果是后者，您可以使用这个非常简单的代码来执行此操作。

HTML:

<div class="image">        
    <img src="images/image1.png"  />
    <img src="images/image2.png"  />
    <img src="images/image3.png"  />
    <img src="images/image4.png"  />
</div>

CSS:

.image
{
    position:relative;
}

.image img
{
   position:absolute;
   top:0;
   left:0;
}

jQuery:

$(function() {

    $('.image img:gt(0)').hide(); // to hide all but the first image when page loads

    setInterval(function()
    {
        $('.image :first-child').fadeOut(1000)
            .next().fadeIn(1000).end().appendTo('.image');
    },5000);        
}

这基本上就像一副纸牌一样对图像进行洗牌。 5000(5秒)是淡入淡出的间隔，1000(1秒)是淡入淡出动画的速度。

要实现此功能，您必须在包含的 div 上使用 position:relative 并使用 position:absolute 将图像置于彼此之上。

jsFiddle demo