求助取值size()无响应 - jQuery论坛

已结贴√ 问题点数：20 回复次数：12

求助取值size()无响应

各位大侠：

    小弟代码如下：其中就是无法取值size（）添加<li>请各位大侠帮小弟答疑解惑啊。。。小弟在这里拜谢了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<title>无标题文档</title>
<style>
*{ padding:0px; margin:0px;list-style:none;}
.banner { width:500px; height:300px; margin:100px auto; border:1px solid #808080; position:relative; overflow:hidden;}
.banner .img{width:5000px; position:absolute; left:0px;top:0px;}
.banner .img img{width:500px; height:300px;}
.banner .img li{float:left;}
.banner .num { position:absolute; width:100%; bottom:10px; left:0px; text-align:center; font-size:0px;}
.banner .num li { width:10px; height:10px; background-color:#888; border-radius:50%;display:inline-block; margin:0px 3px; cursor:pointer;}
.banner .num li.on {background-color: #ff6a00;}
.banner .btn {
    width: 30px;height: 50px;background-color: #808080;opacity: 0.5; filter:alpha(opacity:0.5); position:absolute;top:50%; margin-top:-25px;
    cursor:pointer;
    text-align:center;
    line-height:50px;
    font-size:40px;
    color:#fff;
    font-family:"宋体";
    display:none;
}
.banner .btn_l { left:0px;}
.banner .btn_r { right:0px;}
.banner:hover .btn { display:block;}
</style>
<script type="text/javascript">
$(document).ready(function () {

                var size = $(".banner .img li").size();
                console.log(size);//计算li的数量

                //添加四个li,就是添加圆点
                for (var j = 0; j < size-1; j++) {
                    $(".banner .num").append("<li></li>");
                }
                //给第一个li添加class on
                $(".banner .num li").first().addClass("on");

            });
</script>
</head>

<body>
<div class="banner">
            <ul class="img">
                <li><img src="Adient_00020.jpg" alt=""/></li>
                <li><img src="Adient_00018.jpg" alt="" /></li>
                <li><img src="Adient_00019.jpg" alt="" /></li>
                <li><img src="Adient_00020.jpg" alt="" /></li>
            </ul>
            <ul class="num">


            </ul>
            <div class="btn btn_l"><</div>
            <div class="btn btn_r">></div>
    </div>

</body>
</html>

搜索更多相关主题的帖子: position　relative　PUBLIC　banner　border　

第 2 楼

得分:20

jquery文件没引吧？

剑栈风樯各苦辛，别时冰雪到时春

第 3 楼

得分:0

?美女我是初学者，没有系统的学过jquery只是通过实例进行学习，请问没有引是什么意思？

第 4 楼

得分:0

就是说你用了jquery语法，但是没有引入它的文件。
你先下载个jquery.min.js什么的
然后进行引用，不明白的话就在

<script type="text/javascript">

上面加一行

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

src为库文件存放路径，演示为同级目录，参考修改

剑栈风樯各苦辛，别时冰雪到时春

第 5 楼

得分:0

美女，我下载了jquery.min.js并加载了。命令如下：但是还是不出效果，我真是跪了啊。到底是什么原因呢？

美女，在你的电脑上，这个网页会出现照片下有四个小点的效果么？

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


         $(document).ready(function () {

                var size = $(".banner .img li").size();
                console.log(size);//计算li的数量

                //添加四个li,就是添加圆点
                for (var j = 0; j < size-1; j++) {
                    $(".banner .num").append("<li></li>");
                }
                //给第一个li添加class on
                $(".banner .num li").first().addClass("on");

            });


</script>

第 6 楼

得分:0

程序代码：

<ul class="num">  
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            </ul>

剑栈风樯各苦辛，别时冰雪到时春

第 7 楼

得分:0

说错了，这样改吧

程序代码：

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){  
    var size = $(".img li").size();
    //添加四个li,就是添加圆点  
    for (var j = 0; j < size; j++) {  
        $(".num").append("<li>"+j+"</li>");  
    }  
    //给第一个li添加class on  
    $(".num li").first().addClass("on");  

});  
</script>
</head>

<body>
 <div class="banner">  
            <ul class="img">  
                <li><img src="Adient_00020.jpg" alt=""/></li>  
                <li><img src="Adient_00018.jpg" alt="" /></li>  
                <li><img src="Adient_00019.jpg" alt="" /></li>  
                <li><img src="Adient_00020.jpg" alt="" /></li>  
            </ul>  
            <ul class="num">
            </ul>  
            <div class="btn btn_l">&lt;</div>  
            <div class="btn btn_r">&gt;</div>  
    </div>

[此贴子已经被作者于2017-6-3 21:43编辑过]

剑栈风樯各苦辛，别时冰雪到时春

第 8 楼

得分:0

改完了么小哥哥？

剑栈风樯各苦辛，别时冰雪到时春

第 9 楼

得分:0

女侠，代码试过了，还是不好用。。。。

第 10 楼

得分:0

我把代码改成如下：出来的就是我要的效果，但是用代码中的jq却始终无法实现
<body>
<div class="banner">
            <ul class="img">
                <li><img src="Adient_00020.jpg" alt=""/></li>
                <li><img src="Adient_00018.jpg" alt="" /></li>
                <li><img src="Adient_00019.jpg" alt="" /></li>
                <li><img src="Adient_00020.jpg" alt="" /></li>
            </ul>
            <ul class="num">
             <li></li>
             <li></li>
             <li></li>
             <li></li>
            </ul>
            <div class="btn btn_l"><</div>
            <div class="btn btn_r">></div>
    </div>
</body>