用Jquery將內容加載到div

我希望有人能幫我解決我遇到的一個JQuery問題。我試圖找到一種方法來使用下一個和後退按鈕將多段內容加載到div中。用Jquery將內容加載到div

這裏有一個PIC解釋：

Jquery Slideshow Picture http://www.lindsaygross.com/shared/slideshow.png

這是一個投資組合。理想的情況是，當用戶點擊左側或右側的綠色箭頭時，它將所有客戶端內容（包括照片幻燈片在內的.clientbox中的所有內容）更改爲另一個具有.clientbox類別的div。

我完全開放的建議，以更好的方式來構造這一點。我曾試圖讓客戶端導航從其他本地html頁面中獲取.clientbox信息，但我沒有嘗試過任何方式。

任何人有任何想法？我完全停留在這一個。

這裏是我使用的代碼：我使用slider.js

<div class="container_24 slider_clients"> 

<!-- Top Slider Navigation to rotate clients --> 
<span class="grid_1 prefix_4"> 
     <a id="mainlf_slidenav" class="left"></a> 
    </span> 

    <span class="grid_12 prefix_1 slider_headertxt"> 
    <p>Client Number 1</p> 
    </span> 

    <span class="grid_1 prefix_1"> 
    <a id="mainrt_slidenav" class="right"></a> 
    </span> 

<!-- END Top Slider Navigation to rotate clients --> 

    <div class="clientbox"> 

    <div id="slides" class="clear_left"> 


    <div class="grid_2 clear_left"> 
     <!-- "previous slide" button --> 
     <a class="prev" id="sublf_slidenav"></a> <!-- Affects the <li> for each image in slider_background --> 
    </div> 


     <span class="grid_20 slider_background slides_container"> <!-- DIV FOR PHOTOS OF EACH CLIENT --> 

       <img src="images/logo.png" alt="Client Image 1" /> 
       <img src="images/slider_nav.png" alt="Client Image 2" /> 
       <a><img src="#" alt="Client Image 3" />THE IMAGE WILL GO HERE IN PLACE OF THIS TEXT</a> 
       <img src="#" alt="Client Image 4" /> 

     </span> <!-- END slider_background --> 


    <div class="grid_2"> 
     <!-- "next slide" button --> 
     <a id="subrt_slidenav" class="next"></a> <!-- Affects the <li> for each image in slider_background --> 
    </div> 


     <span class="clear_left"> 
     <span id="slider_objective" class="grid_9 prefix_2"> 

      <h2>Objective:</h2> 
      <p>Design a website that engages visitors with a fun, yet professional, tone while drawing interest in the array of products offered by Nspire and connecting visitors tot he people who make up the company through the use of social media.</p> 

     </span> <!-- END slider_objective --> 

     <span id="slider_cultivated" class="grid_11 prefix_1"> 

      <h2>What We Cultivated:</h2> 
      <ul> 
       <li>Fun & Professional tone by using strategic copywriting</li> 
       <li>Latest blog posts widget that dynamically pulled posts</li> 
       <li>Twitter integration showing the most recent tweet</li> 
       <li>Salesforce CRM integration with forms</li> 
       <li>Interactive product descriptions</li> 
      </ul> 

     </span> <!-- END slider_cultivated --> 

     </span> <!-- END clear_left --> 

    </div> <!-- END slides --> 


</div> <!-- END clientbox --> 

</div> <!-- END div container_24 --> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script src="js/slides.min.jquery.js"></script>

而且Jquery的：

<script language="javascript"> 
$(function(){ 
    $("#slides").slides({ 
    next: 'next' 
    }); 
}); 
</script>

來源

2011-07-18 Brandon

使用jQuery Cycle（http://jquery.malsup.com/cycle/）。我真的不知道爲什麼還有其他的東西存在。 –

@chrisdpratt感謝有關週期的信息。看起來我正在接近它的工作。只是覺得我遇到了正在循環改變我的CSS定位爲絕對，並給它一個0不透明的顯示。任何想法如何解決這一問題？ – Brandon

貌似我能夠使用jQuery週期做嵌套的幻燈片。感謝Chrisdpratt的幫助。

來源

2011-07-25 15:31:38 Brandon

用Jquery將內容加載到div

回答

相關問題