用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

回答

相关问题