使用jQuery交換/切換'div's？

我正在使用this guide來定期進行一些自動圖像切換。使用jQuery交換/切換'div's？

我希望做的是適應它（或得到一些新的想法），用於鏈接一些圖片，我已經得到了當前的（這是結構性的目的，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教程改變比特。

唯一的區別是第一張圖片需要加載時間才能加載，而且沒有一張是可點擊的鏈接。

來源

2011-02-23 PizzAzzra

使用'lowsrc'屬性來提高性能你想要的圖像縮略圖 – Val 2011-02-23 12:23:25

圖像非常小（240x106px）。通過需要圖像縮略圖，你的意思是什麼？ – PizzAzzra 2011-02-23 12:28:38

這裏更換$('#myGallery img:first');，你的腳本：

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

來源

2011-02-23 12:32:46 Prakash

與$('#myGallery div:first');這是swapImages函數內部

來源

2011-02-23 12:22:24 Val

「我試着改變教程中引用'img'到'div'的位。」不幸的是，這樣做並沒有奏效。 – PizzAzzra 2011-02-23 12:26:56

嘗試改變CSS太img到div，應該肯定工作 – Prakash 2011-02-23 12:37:48

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

來源

2011-02-23 12:42:09

使用jQuery交換/切換'div's？

回答

相關問題