0

所以我有这个很棒的幻灯片代码，它与我的 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>
4

1 回答 1

0

演示： 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>
于 2012-12-12T17:53:02.697 回答