jカルーセルと項目の表示に関する問題

jCarouselを使用してギャラリーを表示するウェブサイトに取り組んでいます。しかし、私が何を試みても、私はそれを働かせることはできません、そして、私は今日これを終わらせる必要があります。私は非常に緊急のスケジュールがあります。私のコードは、基本的にデータベースから画像URLを取得してAJAXに送信し、AJAXをjCarouselに渡してギャラリーを作成します。しかし、いくつかの問題があります：jカルーセルと項目の表示に関する問題

正しく表示されません！私は最後のアイテムをデータベースから取り出し、一番下の行に表示します。
データベースから取り出されたアイテムが表示された後、初めて「prev」をクリックするとスクロール効果はなくなり、アイテムは消えます！「次へ」を2〜3回クリックするだけで、スクロール効果があり、アイテムは表示されたままです。
私のアイテムは、カルーセルの最後に常に表示されます！

これは緊急です。私はこれを解決するのを手伝ってください。

about.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> 

<head> 

    <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
    <script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" /> 

    <!--<style type="text/css"> 

    #wrapper 
    { 
     width: 700px; 
     margin-left: auto; 
     margin-right: auto; 
    } 

    #carousel 
    { 
     margin-top: 120px; 
     padding-left: 120px; 
    } 

    #side 
    { 
     padding-left: 550px; 
     position: absolute; 
     padding-top: 120px; 
    } 

    #hidden 
    { 
     color: #FFFFFF; 
    } 

    </style>--> 


    <script type="text/javascript"> 

    jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d) 
{ 
    if ((t/=d) < (1/2.75)) 
    { 
     return c*(7.5625*t*t) + b; 
    } 
    else if (t < (2/2.75)) 
    { 
     return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
    } 
    else if (t < (2.5/2.75)) 
    { 
     return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
    } 
    else 
    { 
     return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
    } 
}; 

function mycarousel_initCallback(carousel) 
{ 
    jQuery('#mycarousel-next').bind('click', function() { 
     carousel.next(); 
     return false; 
    }); 

    jQuery('#mycarousel-prev').bind('click', function() { 
     carousel.prev(); 
     return false; 
    }); 
}; 

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
     easing: 'BounceEaseOut', 
     wrap: "first", 
     initCallback: mycarousel_initCallback, 
     animation: 1000, 
     scroll: 3, 
     visible: 3, 
     buttonNextHTML: null, 
     buttonPrevHTML: null 

    }); 

    jQuery('#mycarousel2').jcarousel({ 
     easing: 'BounceEaseOut', 
     animation: 1000, 
     wrap: "first", 
     initCallback: mycarousel_initCallback, 
     scroll: 3, 
     visible: 3, 
     buttonNextHTML: null, 
     buttonPrevHTML: null 

    }); 

    jQuery('#mycarousel3').jcarousel({ 
     easing: 'BounceEaseOut', 
     animation: 1000, 
     scroll: 3, 
     wrap: "first", 
     initCallback: mycarousel_initCallback, 
     visible: 3, 
     buttonNextHTML: null, 
     buttonPrevHTML: null 

    }); 
}); 

var prevButton = null; 

function getObject(b, el) 
{ 
    var currbutton = b; 
    var http; 
    var url = "about.php"; 
    var parameters = "d=carousel&cat=" + currbutton; 

    try 
    { 
     http = new XMLHttpRequest(); 
    } 

    catch(e) 
    { 
     try 
     { 
      http = new ActiveXObject("Msxml2.XMLHTTP"); 
     } 

     catch(e) 
     { 
      http = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    } 

    function getServer() 
    { 
     if (http.readyState == 4) 
     { 
      var i = 0; 
      var liArr = http.responseText; 
      var built = liArr.split(", "); 
      var li = document.createElement("li"); 
      var ul1 = document.getElementById("mycarousel"); 
      var ul2 = document.getElementById("mycarousel2"); 
      var ul3 = document.getElementById("mycarousel3"); 

      if (el != prevButton) 
      { 
       prevButton = el; 

       while (ul1.hasChildNodes()) {ul1.removeChild(ul1.lastChild);} 
       while (ul2.hasChildNodes()) {ul2.removeChild(ul2.lastChild);} 
       while (ul3.hasChildNodes()) {ul3.removeChild(ul3.lastChild);} 

      } 

      else 
       return 0; 

      while (i < (built.length)/3) 
      { 
       li.innerHTML = built[i]; 
       ul1.appendChild(li); 

       i++;  
      } 

      while (i < ((built.length)/3)*2) 
      { 
       li.innerHTML = built[i]; 
       ul2.appendChild(li); 

       i++; 
      } 

      while (i < (built.length)) 
      { 
       li.innerHTML = built[i]; 
       ul3.appendChild(li); 

       i++; 
      } 
     } 
    } 

    http.open("POST", url, true); 
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    http.setRequestHeader("Content-length", parameters.length); 
    http.setRequestHeader("Connection", "close"); 
    http.onreadystatechange = getServer; 
    http.send(parameters); 
} 
</script> 
</head> 

<body> 
<span id="hidden"> </span> 
<div id="wrapper"> 

<div id="side"> 

<form name="cats"> 

    <input type="button" value="Hats" onclick="getObject('hats', this);"/><br /> 
    <input type="button" value="Pants" onclick="getObject('pants', this);"/><br /> 
    <input type="button" value="Shirts" onclick="getObject('shirts', this);"/><br /> 

</form> 

</div> 
<div id="carousel"> 

<ul id="mycarousel" class="jcarousel-skin-tango"> 
</ul> 
<ul id="mycarousel2" class="jcarousel-skin-tango"> 
</ul> 
<ul id="mycarousel3" class="jcarousel-skin-tango"> 
</ul> 

<input type="button" id="mycarousel-prev" value="prev" /> 
<input type="button" id="mycarousel-next" value="next" /> 

</div> 
</div> 

</body> 

</html>

私はそれは私に迷惑を与えていたと思ったので、私はCSSをコメントし、正直なところ、私はどのような地獄のがjCarouselで起こって見当がつかない。

about.php：

また

<?php 
echo "<img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, hi, hi, hi, hi, hi, hi, hi, hi"; 

?>

、表示されているものよりも、他の項目が存在しない場合でも、私は私の項目が常にに配置されassuminglyので、前方にまだ戻ってスクロールすることができるよ、ではなく、カルーセルの終わり。

多くのコードのように見えますが、実際はそうではありません。私の書式設定には多くの行があり、コメントのCSSには多くの時間がかかり、多くのコードはHTMLとjCarouselの設定であり、数行のバウンスエージングエフェクトもあります。実際のコードはあまりありません！

私が言ったように、これは緊急であり、私はこれを修正する必要があります。しかし、私はそれを働かせることはできません。私を助けてください！

ありがとうございました！

EDIT：

私は、コードを少し変更しましたが、それはまだ動作しません。私は本当にこの1つの助けが必要です！

EDIT：私のdocument.createElementを添加

（ "LI"）。それぞれのwhileループに渡します。今ではすべてのアイテムが表示されますが、縦に表示され、各行には水平ではありません。それ以外の問題はすべて同じです。

EDIT：

ああ、また、行に私の画像が表示され、画像のみがあります。多分jCarouselはimgとtextを受け入れないかもしれませんが、わかりません。

EDIT：

私は行をリロードするんだけど、それは何も変わりません。また、「hi」の代わりに画像を追加しようとしましたが、最初の行に表示する項目が1つしかないということはありません。

EDIT：（状態== 'のinit'）場合とinitCallback機能囲ま

。それは部分的にしか機能しません。ページを何度もリフレッシュして、前のボタンをスパムする場合にのみ、私はそれを動作させます。約10回目のクリックまで、スクロール効果はありません。そして、最初の行にはまだアイテムが1つしか含まれておらず、すべて垂直です。私はそこにイメージを置くので、最初の行は1つのアイテムしか持っていないと思う。カルーセルは固定された高さを持っているので、次のアイテムのための場所はなく、単にそれを取り除く。

EDIT：

それは私が全く同じ瞬間にイメージ負荷をPREVボタンをクリックした場合にのみ機能します。そして、まさに同じ瞬間です。これはコードの意味で何を意味しますか？どのように私はこれを修正するのですか？助けてください！

出典

2010-12-24 Lockhead

間違っていることは、liを作成し、プロパティを変更して別のulに接続することです。おそらく何をすべきでしょうか？毎回document.createElement('li')をあなたのループに移動し、新しいものを作成する（または古いものを複製する）ことです。

ので、基本的にこれを使用する：

 while (i < (built.length)/3) 
     { 
      li = document.createElement('li'); 

      li.innerHTML = built[i]; 
      ul1.appendChild(li); 

      i++;  
     } 

     while (i < ((built.length)/3)*2) 
     { 
      li = document.createElement('li'); 

      li.innerHTML = built[i]; 
      ul2.appendChild(li); 

      i++; 
     } 

     while (i < (built.length)) 
     { 
      li = document.createElement('li'); 

      li.innerHTML = built[i]; 
      ul3.appendChild(li); 

      i++; 
     }

出典

2010-12-24 09:12:49

ありがとうございました！これは少し解決しました！しかし今、問題は変わりました。今は、縦に、各行に、そして横には表示されません。それ以外は、すべて同じです。 – Lockhead

あなたのは現在表示されていますか？ –

ところで、jCarouselはjQueryプラグインです。 jQueryを使ってajax呼び出しとDOM操作を行う方が簡単ではないでしょうか？ –

jカルーセルと項目の表示に関する問題

答えて

関連する問題