                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /H5+JS+CSS3实现七夕言情

给每一个页面的li的宽度不是应该等于容器宽度吗？

//设置每一个页面li的宽度

$.each(slides, function(index) {

var slide = slides.eq(index); //获取到每一个li元素

slides.css({

width: width+'px',

height: height+'px'

});

})

为什么li宽度要等于ul宽度呢？= =代码错了吧？

arlenhui

2015-08-06

源自：H5+JS+CSS3实现七夕言情 2-1

关注问题我要回答

3738

操作

收起

5 回答

arlenhui 提问者
2015-08-06

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>慕课七夕主题</title>
    <script src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.js"></script>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    ol,
    ul,
    li {
        list-style-type: none;
    }
    /*主体部分*/
    #content {
        width    : 60%;
        height   : 60%;
        top      : 20%;
        left     : 20%;
        overflow : hidden;
        position : absolute;
        border   : 1px solid #ccc;
    }
    
    .content-wrap {
        position: relative;
    }
    .content-wrap > li {
        width: 100%;
        height: 100%;
        background: #CAE1FF;
        color: red;
        float: left;
        overflow: hidden;
        position: relative;
    }
    li:nth-child(2) {
       background: #9BCD9B;
    }
   
    li:nth-child(3) {
       background: yellow;
    }
    
    </style>
</head>

<body>
    <div id='content'>
        <ul class='content-wrap'>
            <!-- 第一副画面 -->
            <li> 页面1 </li>
            <!-- 第二副画面 -->
            <li> 页面2 </li>
            <!-- 第三副画面 -->
            <li> 页面3 </li>
        </ul>
    </div>
    <script type="text/javascript">
        var container = $("#content");
        //获取第一个子节点
        var element = container.find(":first")
        //li页面数量
        var slides = element.find("li")
        //获取容器尺寸
        function change(){
            var width = container.width();
            var height = container.height();
            //设置li页面总宽度
            element.css({
                width  : (slides.length * width) + 'px',
                height : height + 'px'
            })
            //设置每一个页面li的宽度
            $.each(slides, function(index) {
                var slide = slides.eq(index); //获取到每一个li元素    
                slides.css({
                   width: width+'px',
                   height: height+'px'
                });
            })
        }
        change();
        window.onresize = function(){
            change();
        }
    </script>
</body>

</html>