| 网站首页 | 业界新闻 | 群组 | 人才 | 技术文章 | 下载频道 | 博客 | 代码贴 | 编程论坛
共有 651 人关注过本帖
标题:求助取值size()无响应
只看楼主 收藏
shiguang112
Rank: 1
等 级:新手上路
帖 子:10
专家分:0
注 册:2017-5-5
结帖率:0
  已结贴   问题点数:20  回复次数:12   
求助取值size()无响应
各位大侠:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">&lt;</div>  
            <div class="btn btn_r">&gt;</div>  
    </div>  


</body>
</html>
搜索更多相关主题的帖子: position  relative  PUBLIC  banner  border  
2017-06-03 15:47
林月儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:湖南
等 级:版主
威 望:70
帖 子:1366
专家分:5758
注 册:2015-3-19
  得分:20 
jquery文件没引吧?

like wind.
2017-06-03 18:03
shiguang112
Rank: 1
等 级:新手上路
帖 子:10
专家分:0
注 册:2017-5-5
  得分:0 
?美女我是初学者,没有系统的学过jquery只是通过实例进行学习,请问没有引是什么意思?
2017-06-03 18:24
林月儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:湖南
等 级:版主
威 望:70
帖 子:1366
专家分:5758
注 册:2015-3-19
  得分:0 
就是说 你用了jquery语法,但是没有引入它的 文件。
你先下载 个jquery.min.js什么的
然后进行引用,不明白的话 就 在
<script type="text/javascript">
上面加一行
<script src="jquery.min.js" type="text/javascript">

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

like wind.
2017-06-03 18:29
shiguang112
Rank: 1
等 级:新手上路
帖 子:10
专家分:0
注 册:2017-5-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>
2017-06-03 21:07
林月儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:湖南
等 级:版主
威 望:70
帖 子:1366
专家分:5758
注 册:2015-3-19
  得分:0 
程序代码:
<ul class="num">  
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            </ul>

like wind.
2017-06-03 21:26
林月儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:湖南
等 级:版主
威 望:70
帖 子:1366
专家分:5758
注 册:2015-3-19
  得分: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编辑过]


like wind.
2017-06-03 21:40
林月儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:湖南
等 级:版主
威 望:70
帖 子:1366
专家分:5758
注 册:2015-3-19
  得分:0 
改完了么小哥哥?

like wind.
2017-06-03 22:50
shiguang112
Rank: 1
等 级:新手上路
帖 子:10
专家分:0
注 册:2017-5-5
  得分:0 
女侠,代码试过了,还是不好用。。。。
2017-06-04 10:28
shiguang112
Rank: 1
等 级:新手上路
帖 子:10
专家分:0
注 册:2017-5-5
  得分: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">&lt;</div>  
            <div class="btn btn_r">&gt;</div>  
    </div>  
</body>
2017-06-04 10:34







关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.162364 second(s), 8 queries.
Copyright©2004-2017, BCCN.NET, All Rights Reserved