javascript - リンク付きの単純なJavaScriptスライドショーのループを発行する

Question

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>

助けてくれてありがとう...

Answer 1

タグは .slides の新しい子であるため、タグを非表示にして表示する必要があります。何かのようなもの：

$(function(){
    $('.slides a:gt(0)').hide();

    setInterval(function(){
      $('.slides a:first-child')
        .fadeOut('slow').next('a').fadeIn().end().appendTo('.slides');
    }, 7000);
});