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 回答