Question

我是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

任何帮助都是适当的

Answer 1

尝试在样式标记中包含以下代码片段

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

这里我将li tag的overflow属性设置为auto，也是最小宽度。希望这项工作

Answer 2

我相信你的问题是.width（）返回一个无单位的值。例如，它会从px中删除400px。

您可以尝试将.width()更改为.css('width')并查看是否有效

如何根据其中的内容动态设置<li>标签的宽度并相应滚动？</li>

2 个答案: