用jQuery加載動態更改滑塊內容

我在jQuery（bxslider）中使用滑塊插件。當我的頁面第一次加載時，滑塊類將使用displayHomeLine（）函數加載默認列表元素。然後我用jquery load調用另一個php來替換整個滑塊類（ul和li元素）的內容。它加載得很好，但它不動畫，而是顯示默認的無序列表。我的問題是 - 是否可以爲第一頁加載時的默認內容製作滑塊動畫？我不想刷新頁面，因此還有什麼其他選擇？我的代碼：用jQuery加載動態更改滑塊內容

<body> 
<center> 

<?php 
     function displayHomeTimeline(){ 

      $home_timeline=$_SESSION['home_timeline']; 

      foreach($home_timeline as $item){ 
       echo '<li>'.$item->text.'</li>'; 
      } 

     } 




?> 
      <div id="page_content"> 
      <h1>Welcome <?php echo $_SESSION['screen_name']?></h1> 
       <ul id="sections"> 
        <li style="width:550px;"><h2>Tweets</h2> 
        <!-- Slider --> 
        <div id="wrapper_slider"> 

         <ul class="bxslider"> 
          <?php displayHomeTimeline();?><--Loads the default content 
         </ul> 
        </div> 



        </li> 
        <li style="width:180px;"> 
         <h2>Followers</h2> 

        </li> 
       </ul> 
      </div> 
</center> 
<script type="text/javascript"> 
    //function to populate the slider with follower's tweets 
    function populateFollowersTweets(screen_name){ 
      //THIS IS THE CALL TO OTHER FILE WHICH CREATES THE CLASS FOR SLIDER 
     $('#wrapper_slider').load('follower_status.php?sname='+screen_name+''); 
      //for tweets slider 

       //TRIED PUTTING EXPLICIT CALL STILL DOESN"T ANIMATE 
      $('.bxslider').bxSlider({ 
      auto:true}); 
    } 





$(document).ready(function(){ 




    //for tweets slider 
    $('.bxslider').bxSlider({ 
    auto:true}); 





    //for populating follower's tweets in the slider 
    $('#followers_list>li').click(function(){ 
//FUNCTION TO REPLACE THE CONTENT WITH NEW BXSLIDER CLASS 
    populateFollowersTweets($(this).text()); 
    }); 


}); 


</script> 
</body>

文件，該文件爲BXSlider創建相同的無序列表：follower_status.php

<?php 
    require("lib/twitteroauth/twitteroauth.php"); 
    session_start(); 

    //function to print user timelines 
    function getUserTimeline($screen_name){ 
      $oauth_token = $_SESSION['oauth_token']; 
      $oauth_token_secret = $_SESSION['oauth_token_secret']; 
      $connection = new TwitterOAuth('xxx', 'xxx', $oauth_token, $oauth_token_secret); 

      $tweets=$connection->get('statuses/user_timeline',array('screen_name' => $screen_name, 'count' => 10)); 
      foreach($tweets as $item){ 
       echo '<li>'.$item->text.'</li>'; 
      } 

     } 

    $screen_name=$_GET['sname']; 

    echo '<ul class="bxslider">'; 
    getUserTimeline($screen_name); 
    echo '</ul>'; 
?>

截圖應該更好地展現我的疑問。這是當默認的內容加載滑塊： enter image description here

這是發生了什麼之後，我稱之爲加載功能與follower_status.php更換滑塊類： enter image description here

來源

2013-04-22 harsh8888

的AJAX請求實現getMethod工作沒問題，並達到了目的。

$.get('xxx.php?sname='+screen_name+'', function(data) { 
      $('.bxslider').bxSlider({ 
      auto:true});

來源

2013-04-25 03:21:07 harsh8888

用jQuery加載動態更改滑塊內容

回答

相關問題