jquery - 使用 jQuery 在 'div' 之间交换/切换？

Question

我正在使用 this guide 整理一些间隔时间的自动图像切换。

我想做的是针对一些带有我当前获得的链接的图像进行调整(或获得一些新想法)(这是出于结构目的，link#和image# 变量是我的代码中的实际元素):

<div id="myGallery">    
    <div class="active">
        <a href="link1"><img src="image1" /></a>
    </div>
    <div>
        <a href="link2"><img src="image2" /></a>
    </div>
    <div>
        <a href="link3"><img src="image3" /></a>
    </div>
</div>

我尝试将教程中引用 img 的位更改为 div。

唯一的区别是第一个图像需要很长时间才能加载，并且没有一个图像可以作为链接“点击”。

Answer 1

这里是您的脚本:

  <script>
    function swapImages(){
      var $active = $('#myGallery .active');
      var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery div:first');
      $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
      });
    }

    $(document).ready(function(){
      // Run our swapImages() function every 5secs
      setInterval('swapImages()', 2000);
    })
  </script>

风格:

  <style>
    #myGallery{
      position:relative;
      width:400px; /* Set your image width */
      height:300px; /* Set your image height */
    }
    #myGallery div{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }
    #myGallery div.active{
      display:block;
    }
  </style>