앵커 태그와 JQuery 슬라이더 문제

Question

그래서 앵커 태그에 넣을 때까지 내 img 태그와 완벽하게 작동하는 멋진 슬라이드 쇼 코드가 있습니다. img 태그를 잡는 대신 슬라이드 쇼는 앵커 태그를 잡고 표시합니다. 즉 4 개의 이미지를 순환하는 대신 4 개의 이미지와 4 개의 앵커 태그를 차례로 순환합니다. 이로 인해 초기 이미지 뒤에 4 개의 빈 이미지가 생깁니다.

 <script type="text/javascript"> 

     $(function(){ 
      $('div.fadein a img.bestof:gt(0)').hide(); 
      setInterval(function(){ 
     $('div.fadein a img.bestof:first-child').fadeOut() 
      .next('img.bestof').fadeIn() 
      .end().appendTo('.fadein');}, 
     3000); 
     }); 

     </script> 

     <style> 
     .fadein { position:relative; width:200px; height:160px; } 
     .fadein img { position:absolute; left:0; top:0; } 
     </style> 

     <div class="fadein"> 
     <?php foreach ($array as $image){ 
      print(" 
      <a href='$image[link]' target='$target'><img src='$image[image]' class='bestof' style='width:200px; height:160px;' ></a> 
     "); } ?> 
     </div> 

제안 사항 각 이미지를 클릭 할 수 있도록 앵커 태그가 필요합니다. Anchor 태그를 통해 사이클링을 시도했지만 이미지가 표시되지 않았습니다.

생성 된 HTML은 다음과 같습니다.

<script type="text/javascript"> 

$(function(){ 
    $('div.fadein a img.bestof:gt(0)').hide(); 
    setInterval(function(){ 
     $('div.fadein a img.bestof:first-child').fadeOut() 
     .next('img.bestof').fadeIn() 
     .end().appendTo('.fadein');}, 
     3000); 
}); 

</script> 

<style> 
.fadein { position:relative; width:200px; height:160px; } 
.fadein img { position:absolute; left:0; top:0; } 
</style> 

<div class="fadein"> 

    <a href='http://google.com' target='_blank'><img src='http://4.bp.blogspot.com/-PilKprMNhpo/TVc4rKk_gKI/AAAAAAAAAWo/O3wPK3kIH_8/s1600/two_flowers.preview.jpg' class='bestof' style='width:200px; height:160px;' ></a> 

    <a href='http://hooplaha.com' target='_blank'><img src='http://www.redbudfarms.com/wp-content/uploads/2011/01/cone-flowers-preview.jpg' class='bestof' style='width:200px; height:160px;' ></a> 

    <a href='http://facebook.com' target='_blank'><img src='http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249398_1693_1413.jpg' class='bestof' style='width:200px; height:160px;' ></a> 

    <a href='http://bing.com' target='_blank'><img src='http://www.rosarian.com/graphics/images/rose.jpg' class='bestof' style='width:200px; height:160px;' ></a> 

    <a href='http://linkedin.com' target='_blank'><img src='http://blog.zap2it.com/pop2it/rainbow-roses.jpg' class='bestof' style='width:200px; height:160px;' ></a> 
    </div> 

Answer 1

demno :http://jsbin.com/welcome/61090

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

</script> 

<style> 
    .fadein a { 
     position: absolute; 
     left: 0; 
     top: 0; 
     display: inline-block; 
    } 
    .fadein { 
     position: relative; 
    } 
    .fadein img, .fadein, .fadein a { 
     width: 200px; 
     height: 160px; 
    } 
</style>