                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /H5+JS+CSS3實(shí)現(xiàn)七夕言情

給每一個(gè)頁(yè)面的li的寬度不是應(yīng)該等于容器寬度嗎？

//設(shè)置每一個(gè)頁(yè)面li的寬度

? ? ? ? $.each(slides, function(index) {

? ? ? ? ? ? var slide = slides.eq(index); //獲取到每一個(gè)li元素 ? ?

? ? ? ? ? ? slides.css({

? ? ? ? ? ? ? ?width: width+'px',

? ? ? ? ? ? ? ?height: height+'px'

? ? ? ? ? ? });

? ? ? ? })

為什么li寬度要等于ul寬度呢？= =代碼錯(cuò)了吧？

arlenhui

2015-08-06

源自：H5+JS+CSS3實(shí)現(xiàn)七夕言情 2-1

關(guān)注問(wèn)題我要回答

3811

操作

收起

2 回答

arlenhui 提問(wèn)者
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>?頁(yè)面1?</li>
????????????<!--?第二副畫面?-->
????????????<li>?頁(yè)面2?</li>
????????????<!--?第三副畫面?-->
????????????<li>?頁(yè)面3?</li>
????????</ul>
????</div>
????<script?type="text/javascript">
????????var?container?=?$("#content");
????????//獲取第一個(gè)子節(jié)點(diǎn)
????????var?element?=?container.find(":first")
????????//li頁(yè)面數(shù)量
????????var?slides?=?element.find("li")
????????//獲取容器尺寸
????????function?change(){
????????????var?width?=?container.width();
????????????var?height?=?container.height();
????????????//設(shè)置li頁(yè)面總寬度
????????????element.css({
????????????????width??:?(slides.length?*?width)?+?'px',
????????????????height?:?height?+?'px'
????????????})
????????????//設(shè)置每一個(gè)頁(yè)面li的寬度
????????????$.each(slides,?function(index)?{
????????????????var?slide?=?slides.eq(index);?//獲取到每一個(gè)li元素????
????????????????slides.css({
???????????????????width:?width+'px',
???????????????????height:?height+'px'
????????????????});
????????????})
????????}
????????change();
????????window.onresize?=?function(){
????????????change();
????????}
????</script>
</body>

</html>