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>

各画像をクリック可能にするために、アンカータグが必要です。アンカータグを循環してみましたが、画像が表示されませんでした。

これが生成された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

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>
于 2012-12-12T17:53:02.697 に答える