2

scroll DemoにjQuery Horizo​​ntal scroll plugi n を使用しています。

li に余分な画像を追加すると、追加された画像が表示されません。誰かアイデアがありますか？

<ul id="horiz_container_outer">
        <li id="horiz_container_inner">
            <ul id="horiz_container">
                <li><img src="images/toystory.png" width="500px" height="300px" alt="Toy Story" /></li>
                <li><img src="images/up.png" width="500px" height="300px" alt="UP" /></li>
                <li><img src="images/ratatouille.png" width="500px" height="300px" alt="Ratatouille" /></li>
                <li><img src="images/findingnemo.png" width="500px" height="300px" alt="Finding Nemo" /></li>
                <li><img src="images/cars.png" width="500px" height="300px" alt="Cars" /></li>
                <li><img src="images/monstersinc.png" width="500px" height="300px" alt="Monsters Inc" /></li>
                <li><img src="images/bugslife.png" width="500px" height="300px" alt="A Bugs Life" /></li>
                <li><img src="images/incredibles.png" width="500px" height="300px" alt="The Incredibles" /></li>
                <li><img src="images/bugslife.png" width="500px" height="300px" alt="A Bugs Life" /></li>
                <li><img src="images/incredibles.png" width="500px" height="300px" alt="The Incredibles" /></li>
                <li><img src="images/bugslife.png" width="500px" height="300px" alt="A Bugs Life" /></li>
                <li><img src="images/toystory.png" width="500px" height="300px" alt="The Incredibles" /></li>
                <li><img src="images/bugslife.png" width="500px" height="300px" alt="A Bugs Life" /></li>
                <li><img src="images/toystory.png" width="500px" height="300px" alt="The Incredibles" /></li>
            </ul>
        </li>       
</ul>

jQuery

$(document).ready(function(){
    $('#horiz_container_outer').horizontalScroll();

});
4

1 に答える 1

0

私が見つけた唯一の解決策は、CSSを調整することです。そのルート フォルダーには、CSS フィールド名jquery.horizo​​ntal.scroll.cssがあります。

以下のように変更したところ、現在 14 枚の写真が表示されています。

#horiz_container
{
    width:7064px;
    margin:0px;
    padding:0px;
    height:300px;
    margin-left:0px;
}

widthおよびmargin-left属性で遊んだすべて。

ur .phpファイルに移動し、14 個の画像を追加し、ID #horiz_containerの CSS を変更します。

于 2013-01-30T07:48:26.637 に答える