Use jQuery to swap/switch between 'div's?_问答_开发者

Use jQuery to swap/switch between 'div's?

开发者 https://www.devze.com 2023-02-13 10:18 出处：网络

I was using this guide to sort out some automatic image switching at intervals. What I\'d like to do is adapt it (or get some new ideas) for some images with links which I\'ve currently got as (this

相关专题：jquery

I was using this guide to sort out some automatic image switching at intervals.

What I'd like to do is adapt it (or get some new ideas) for some images with links which I've currently got as (this is for structural purposes, the link# and image# variables are actual elements in my code):

<div id="myGallery">    
    <div class="active">
      开发者_Python百科  <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>

I tried changing the bits in the tutorial that referenced img to div.

The only difference was that the first image took ages to load and none of them were 'clickable' as links.

Here, your script:

  <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 :

  <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>

<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>

replace $('#myGallery img:first'); with $('#myGallery div:first'); which is inside the swapImages function