编程论坛 → jQuery论坛

求助取值size()无响应

shiguang112 发布于 2017-06-03 15:47， 5621 次点击

各位大侠：

    小弟代码如下：其中就是无法取值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>

12 回复

#2

林月儿2017-06-03 18:03

jquery文件没引吧？

#3

shiguang1122017-06-03 18:24

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

#4

林月儿2017-06-03 18:29

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

<script type="text/javascript">

上面加一行

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

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

#5

shiguang1122017-06-03 21:07

美女，我下载了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

林月儿2017-06-03 21:26

程序代码：

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

#7

林月儿2017-06-03 21:40

说错了，这样改吧

程序代码：

<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"><</div>
            <div class="btn btn_r">></div>
    </div>

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

#8

林月儿2017-06-03 22:50

改完了么小哥哥？

#9

shiguang1122017-06-04 10:28

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

#10

shiguang1122017-06-04 10:34

我把代码改成如下：出来的就是我要的效果，但是用代码中的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>

#11

shiguang1122017-06-04 10:47

侠女我有个小问题，加载jq的时候必须是src="jquery.min.js"么？如果是src="jquery-1.11.3.min.js"行不行？

#12

shiguang1122017-06-04 14:19

哈哈~~谢谢~~美女，代码好用了。。。果然是加载jq的原因。
按你的方法又调试了50遍，终于好用了，代码如下：
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script>
.
.
.
</script>

#13

林月儿2017-06-04 17:44

50。。。。表吓我，那你可以左右切换，点击切换，定时滚动播？

1