把代碼copy到本地只顯示第一個顏色的頁面
<html>
<head>
? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
? ? <title>慕課七夕主題</title>
? ? <script src="https://code.jquery.com/jquery-3.1.1.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");
? ? ? ? // 獲取第一個子節點
? ? ? ? var element = container.find(":first");
? ? ? ? // li頁面數量
? ? ? ? var slides = element.find("li");
? ? ? ? // 獲取容器尺寸
? ? ? ? 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元素? ??
? ? ? ? ? ? slide.css({
? ? width? : width + 'px',
? ? height : height + 'px'
});
? ? ? ? });
? ? </script>
</body>
</html>
2018-09-02
頁面加載執行了JS代碼，所以獲取第一個頁面，只顯示第一個頁面。之后課程會加一些點擊按鈕實現頁面切換的代碼