问题循环简单的javascript幻灯片与链接

Issue looping simple javascript slideshow with links

本文关键字：幻灯片 链接 javascript 循环 简单 问题      更新时间：2023-09-26

我有一个简单的幻灯片使用javascript。我想让图像链接和可点击。然而，在第一次循环之后，图像不会加载，我只得到一个白色的空间，周围的边框通过我的css…我希望简单的幻灯片工作，并在每个图像加载。

下面是HTML:

<div class="slides">
    <a href="http://www.google.de" target="_blank"><img src="images/sample_slides/test.jpg"alt="test"></a>
    <a><img src="images/sample_slides/test1.jpg" alt="test1"></a>
    <a><img src="images/sample_slides/test2.jpg" alt="test2"></a>
    <a><img src="images/sample_slides/test3.jpg" alt="test3"></a>
</div>

这是我的Javascript:

<script type="text/javascript">
$(function(){$('.slides img:gt(0)').hide();
setInterval(function(){$('.slides :first-child').fadeOut('slow').next('img').fadeIn().end().appendTo('.slides');}, 7000);});
</script>

您需要隐藏和显示a标记，因为它们是.slides的新子标记。比如:

$(function(){
    $('.slides a:gt(0)').hide();
    setInterval(function(){
      $('.slides a:first-child')
        .fadeOut('slow').next('a').fadeIn().end().appendTo('.slides');
    }, 7000);
});
相关文章：