2014-03-04 41 views
0

我想在我的主頁上顯示前兩個部分,然後當用戶點擊「顯示更多新聞」時,前兩個消息消失,另外兩個隱藏出現。 它可能使部分滑動jCarousel? 因爲我已經嘗試了很多方法,從不工作。 它更好地使用其他插件的幻燈片通過內容部分?不能滑過部分內容,更好地使用其他插件?

進口的jQuery庫

<script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script> 
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.9.1'></script> 

HTML:

  <div id="news-content"> 

      <h1>News</h1> 
      <hr/> 

      <div id="firstnews"> 

      <article id="loop-news"> 
       <img src="image1.png" /> 
       <a href="#">Title 1</a> 
       <p>Text Title 1</h3> 
      </article> 


      <article id="loop-news"> 
       <img src="image2.png" /> 
       <a href="#">Title 2</a> 
       <p>Text Title 2</p> 
       <h3>Read more</h3> 
      </article> 

      </div> 

      <!-- Just want to show this articles below when click on "SHOW MORE NEWS" --> 

      <div id="secondnews"> 

      <article id="loop-news"> 
       <img src="image1.png" /> 
       <a href="#">Text only show</a> 
       <p>Text Title 1</h3> 
      </article> 


      <article id="loop-news"> 
       <img src="image2.png" /> 
       <a href="#">Title 2</a> 
       <p>Text Title 2</p> 
       <h3>Read more</h3> 
      </article> 

      </div> 

      <hr/> 
      <a href="#" id="nextBtn">SHOW MORE NEWS(+)</a> 

      </div> 

的Jquery:

<script type="text/javascript"> 

     $(document).ready(function() { 
      $("news-content").jCarouselLite({ 
       btnPrev: "#nextBTN", 
       visible: 1 
      }) 
     }); 

</script> 

回答

相關問題