                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

3817

操作

收起

2 回答

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>