Question

我正在使用 this guide 来定期进行一些自动图像切换。

我想做的是为某些带有我目前所获得的链接的图片调整（或获得一些新的想法）（这是出于结构目的，link#和{{1}变量是我代码中的实际元素：

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。

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

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>

Answer 2

<html>
<head>
  <script src="jquery.js">
  </script>
  <script>
    function swapImages(){
      var active = $('.active');


      var next = $(active).next('div');

      if(next.length > 0){

        $(active).removeClass('active');
        $(next).fadeIn().addClass('active');      

        }
        else{
                $(active).removeClass('active');
            next = $('#myGallery div:first-child');
            $(next).addClass('active');      

        }
    }

    $(document).ready(function(){
      setInterval('swapImages()', 1000);
    })
  </script>
  <style>
    .active{background: red;}
  </style>
</head>
<body>
  <div id="myGallery">
  <div class="active">
      <a href="#" >
        <img src="image1.jpg" class="active" />
        LInk 1
        </a>
  </div>



  <div>
   <a href="">LInk 2
    <img src="image2.jpg" />
    </a>
   </div>


    <div>
        <a href="">LInk 3
        <img src="image3.jpg" />
        </a>
    </div>

  </div>
</body>
</html>

Answer 3

将$('#myGallery img:first');替换为$('#myGallery div:first');函数

中的swapImages

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

3 个答案: