為什么在這上面運行沒效果，自己寫的運行只顯示頁面1
<!DOCTYPE html>
<html>
<head>
??? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
??? <title>慕課七夕主題</title>
??? <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
??? <style type="text/css">
??? * {
??????? padding: 0;
??????? margin: 0;
??? }
??? 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");
??????? // 獲取第一個子節(jié)點
??????? var element = container.find(":first");
??????? // li頁面數(shù)量
??????? var slides = element.find("li");
??????? // 獲取容器尺寸
??????? var width = container.width();
??????? var height = container.height();
??????? // 設(shè)置li頁面總寬度
??????? element.css({
??????????? width? : (slides.length * width) + 'px',
??????????? height : height + 'px'
??????? });
??????? // 設(shè)置每一個頁面li的寬度
??????? $.each(slides, function(index) {
??????????? var slide = slides.eq(index); //獲取到每一個li元素?? ?
??????????? slide.css({
??????????????? width:width+'px',
??????????????? height:height+'px'
??????????? });
??????? });
??? </script>
</body>
</html>
2017-03-20
運行起來就是只顯示頁面1哇，#content的寬度與? .content-wrap > li的寬度相等。.content的寬度等于三個li寬度之和。#content，overflow：hidden。其余兩個li,hidden了。