0

私はJavascriptが初めてで、この問題に遭遇しました。<li>コンテンツに応じてタグの幅を動的に設定し、それに応じてスクロールしたい。

<html>
<head>
<style type="text/css">
ul.images 
{
  padding:0px;
  margin:0px;
  white-space: nowrap;
  width:auto;
  overflow:hidden;
}

ul.images li 
{
  line-height:200px;
  display: inline;

}


</style>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script language="javascript">
 $(document).ready(function(){
    var totalWidth = $("li.list").width();
        totalWidth += 4;
 });

 function scrollDiv(dir,px) {
     alert("heloo");
        /*var img_w=document.getElementsByTagName("li").width;
        var curr_width = parseInt(img_w);
        var scroll_width=(curr_width+4);*/

        alert(img_w);
        var scroller = document.getElementById("scroller");
        if (dir == 'l') {
            scroller.scrollLeft -= px;
        }
        else if (dir == 'r') {
            scroller.scrollLeft += px;
        }
    }

</script>

</head>
<body>
<div style="width:1450px">
    <div style="float:left;">
        <a href="javascript: void(0);" onClick="scrollDiv('l',totalWidth); return false;" style="display:table-cell;height:155px;vertical-align:middle"><img src="backward.png" height="50" width="50"/></a>
    </div>

        <div style="width:1220px;float:left">
            <ul class="images" id="scroller">
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li> 
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li> 
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>       
            </ul>
        </div>

    <div style="float:left;">
        <a href="javascript: void(0);" onClick="scrollDiv('r',totalWidth); return false;" style="display:table-cell;height:155px;vertical-align:middle;"><img src="forward.png" height="50" width="50"/></a>
    </div>
</div>
</body>
</html>

私が直面しているエラーはError: totalWidth is not defined

どんな助けも感謝します

4

2 に答える 2

1

スタイルタグに次のコードフラグメントを含めてみてください

li{
    min-width:12px;
    overflow:auto;
}

ここでは、li タグのオーバーフロー プロパティを auto に設定し、最小幅も設定しています。これがうまくいくことを願っています

于 2012-05-30T13:26:06.760 に答える
0

あなたの問題は、 .width() が単位のない値を返すことだと思います。たとえば、pxfromを削除し400pxます。

に変更.width()し.css('width')てみて、それが機能するかどうかを確認できます

于 2012-05-30T13:23:43.423 に答える