Accueil Explorer Aide
Connexion
lovecoding
/
VIP26
9
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

fix:day:13

e il y a 2 ans
Parent
45ba3b7d18
commit
3af45926b9
15 fichiers modifiés avec 514 ajouts et 0 suppressions
Vue séparée Afficher les stats Diff
  1. 99 0
      day12/html/5.轮播图.html
  2. 112 0
      day12/html/6.滑入轮播图.html
  3. 65 0
      day12/js/5.轮播图.js
  4. 47 0
      day12/js/6.滑入轮播图.js
  5. 76 0
      day13/html/1.淡入淡出轮播图.html
  6. 25 0
      day13/html/2.获取元素宽度.html
  7. 29 0
      day13/html/3.小例子.html
  8. BIN
      day13/image/1.jpg
  9. BIN
      day13/image/2.jpg
  10. BIN
      day13/image/3.jpg
  11. BIN
      day13/image/4.jpg
  12. BIN
      day13/image/5.jpg
  13. 19 0
      day13/js/1.淡入淡出轮播图.js
  14. 13 0
      day13/js/2.获取元素宽度.js
  15. 29 0
      day13/js/3.小例子.js

+ 99 - 0
day12/html/5.轮播图.html
Voir le fichier 

@@ -0,0 +1,99 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #container {
 
+            width: 590px;
 
+            height: 470px;
 
+            margin: 100px auto;
 
+            position: relative;
 
+        }
 
+        #imgBox {
 
+            /* position: absolute;
 
+            top: 0; */
 
+        }
 
+        .selected {
 
+            display: none;
 
+        }
 
+        .choose {
 
+            display: block;
 
+        }
 
+        #list {
 
+            overflow: hidden;
 
+            position: absolute;
 
+            right: 10px;
 
+            bottom: 10px;
 
+        }
 
+        #list li {
 
+            float: left;
 
+            width: 20px;
 
+            height: 20px;
 
+            background: purple;
 
+            color: #fff;
 
+            font-size: 14px;
 
+            text-align: center;
 
+            line-height: 20px;
 
+            border-radius: 50%;
 
+            margin-right: 10px;
 
+        }
 
+        #list .active {
 
+            background: #f00;
 
+            color: #ff0;
 
+        }
 
+        #prev,#next {
 
+            width: 50px;
 
+            height: 50px;
 
+            background: rgb(0, 42, 255);
 
+            color: #66e21f;
 
+            font-size: 30px;
 
+            text-align: center;
 
+            line-height: 50px;
 
+            position: absolute;
 
+            top: 50%;
 
+            margin-top: -25px;
 
+            display: none;
 
+        }
 
+        #prev {
 
+            left: 0;
 
+        }
 
+        #next {
 
+            right: 0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="imgBox">
 
+            <img src="../image/1.jpg" alt="" class="selected choose">
 
+            <img src="../image/2.jpg" alt="" class="selected">
 
+            <img src="../image/3.jpg" alt="" class="selected">
 
+            <img src="../image/4.jpg" alt="" class="selected">
 
+            <img src="../image/5.jpg" alt="" class="selected">
 
+        </div>
 
+        <ul id="list">
 
+            <li class="active">1</li>
 
+            <li>2</li>
 
+            <li>3</li>
 
+            <li>4</li>
 
+            <li>5</li>
 
+        </ul>
 
+        <div id="prev">
 
+            <span>&lt;</span>
 
+        </div>
 
+        <div id="next">
 
+            <span>&gt;</span>
 
+        </div>
 
+    </div>
 
+    <script src="../js/5.轮播图.js"></script>
 
+</body>
 
+</html>

+ 112 - 0
day12/html/6.滑入轮播图.html
Voir le fichier 

@@ -0,0 +1,112 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #container {
 
+            width: 590px;
 
+            height: 470px;
 
+            margin: 100px auto;
 
+            overflow: hidden;
 
+            position: relative;
 
+        }
 
+        #imgBox {
 
+            width: 2950px;
 
+            height: 470px;
 
+            /* 过渡效果的css3样式属性
 
+                符合输出
 
+                property 规定以什么方式去过渡
 
+                duration 运动的时间（s/ms）
 
+                timing-function 运动的方式
 
+                    linear 匀速
 
+                delay 运动何时开始 
+            */
 
+            /* transition: property duration timing-function delay; */
 
+            position: absolute;
 
+            left: 0;
 
+            transition: left 2s linear;
 
+        }
 
+        /* 解决行内块元素空白间隙问题
 
+            1.让所有行内块元素中间无空格
 
+            2.float 浮动
 
+        */
 
+        #imgBox img {
 
+            float: left;
 
+        }
 
+        .list {
 
+            overflow: hidden;
 
+            position: absolute;
 
+            bottom: 10px;
 
+            right: 10px;
 
+        }
 
+        .list li {
 
+            float: left;
 
+            width: 20px;
 
+            height: 20px;
 
+            background: purple;
 
+            color: #fff;
 
+            border-radius: 50%;
 
+            text-align: center;
 
+            line-height: 20px;
 
+            font-size: 14px;
 
+            margin-left: 10px;
 
+        }
 
+        #prev,#next {
 
+            width: 50px;
 
+            height: 50px;
 
+            background: rgb(0, 42, 255);
 
+            color: #66e21f;
 
+            font-size: 30px;
 
+            text-align: center;
 
+            line-height: 50px;
 
+            position: absolute;
 
+            top: 50%;
 
+            margin-top: -25px;
 
+        }
 
+        #prev {
 
+            left: 0;
 
+        }
 
+        #next {
 
+            right: 0;
 
+        }
 
+        .list .selected {
 
+            background: #f00;
 
+            color: #ff0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="imgBox">
 
+            <img src="../image/1.jpg" alt="">
 
+            <img src="../image/2.jpg" alt="">
 
+            <img src="../image/3.jpg" alt="">
 
+            <img src="../image/4.jpg" alt="">
 
+            <img src="../image/5.jpg" alt="">
 
+        </div>
 
+        <ul class="list">
 
+            <li class="selected">1</li>
 
+            <li>2</li>
 
+            <li>3</li>
 
+            <li>4</li>
 
+            <li>5</li>
 
+        </ul>
 
+        <div id="prev">
 
+            <span>&lt;</span>
 
+        </div>
 
+        <div id="next">
 
+            <span>&gt;</span>
 
+        </div>
 
+    </div>
 
+    <script src="../js/6.滑入轮播图.js"></script>
 
+</body>
 
+</html>

+ 65 - 0
day12/js/5.轮播图.js
Voir le fichier 

@@ -0,0 +1,65 @@
 
+var picture = document.getElementsByClassName("selected");
 
+var point = document.getElementsByTagName("li");
 
+var prev = document.getElementById("prev");
 
+var next = document.getElementById("next");
 
+var container = document.getElementById("container");
 
+// 图片索引
 
+var isNow = 0;
 
+// 抽取方法
 
+var autoPlay = function(ind) {
 
+    for(var i=0;i<point.length;i++) {
 
+        point[i].className = '';
 
+        picture[i].className = 'selected'
 
+    }
 
+    point[ind].className = 'active';
 
+    picture[ind].className = 'selected choose';
 
+}
 
+
 
+// point操作
 
+for(var i=0;i<point.length;i++) {
 
+    point[i].index = i;
 
+    point[i].onclick = function() {
 
+        // this=>point[i]
 
+        isNow = this.index;
 
+        autoPlay(isNow);
 
+    }
 
+}
 
+
 
+// 上一页
 
+prev.onclick = function() {
 
+    isNow--;
 
+    if(isNow < 0) {
 
+        isNow = picture.length - 1;
 
+    }
 
+    autoPlay(isNow);
 
+}
 
+
 
+// 下一页
 
+next.onclick = function() {
 
+    isNow++;
 
+    if(isNow > picture.length -1) {
 
+        isNow = 0;
 
+    }
 
+    autoPlay(isNow);
 
+}
 
+
 
+// 自动播放
 
+var timer = setInterval(function(){
 
+    next.onclick();
 
+},1000)
 
+
 
+// 鼠标划过
 
+container.onmousemove = function() {
 
+    prev.style.display = 'block';
 
+    next.style.display = 'block';
 
+    clearInterval(timer);
 
+}
 
+
 
+// 鼠标划出
 
+container.onmouseout = function() {
 
+    prev.style.display = 'none';
 
+    next.style.display = 'none';
 
+    timer = setInterval(function(){
 
+        next.onclick();
 
+    },1000)
 
+}

+ 47 - 0
day12/js/6.滑入轮播图.js
Voir le fichier 

@@ -0,0 +1,47 @@
 
+var btn = document.querySelectorAll('.list li');
 
+console.log(btn);
 
+var picture = document.getElementsByTagName("img");
 
+var imgBox = document.getElementById("imgBox");
 
+var prev = document.getElementById("prev");
 
+var next = document.getElementById("next");
 
+var isNow = 0;
 
+// this=>window
 
+// 点击小圆点时
 
+for(var i=0;i<btn.length;i++) {
 
+    btn[i].index = i;
 
+    btn[i].onclick = function() {
 
+        for(var j=0;j<btn.length;j++) {
 
+            btn[j].className = '';
 
+        }
 
+        // this=>btn[i]
 
+        this.className = 'selected';
 
+        isNow = this.index;
 
+        imgBox.style.left = -590 * this.index + 'px';
 
+    }
 
+}
 
+
 
+// 下一张
 
+next.onclick = function() {
 
+    isNow++;
 
+    if(isNow > picture.length - 1) {
 
+        isNow = 0;
 
+    }
 
+    for(var i=0;i<btn.length;i++) {
 
+        btn[i].className = '';
 
+    }
 
+    btn[isNow].className = 'selected';
 
+    imgBox.style.left = -590 * isNow + 'px';
 
+}
 
+
 
+// 上一张
 
+prev.onclick = function() {
 
+    isNow--;
 
+    if(isNow < 0) {
 
+        isNow = picture.length -1;
 
+    }
 
+    for(var i=0;i<btn.length;i++) {
 
+        btn[i].className = '';
 
+    }
 
+    btn[isNow].className = 'selected';
 
+    imgBox.style.left = -590 * isNow + 'px';
 
+}

+ 76 - 0
day13/html/1.淡入淡出轮播图.html
Voir le fichier 

@@ -0,0 +1,76 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #container {
 
+            width: 590px;
 
+            height: 470px;
 
+            margin: 100px auto;
 
+            position: relative;
 
+        }
 
+        #imgBox img{
 
+            /* opacity 透明度
 
+                占位
 
+                点击事件仍会触发
 
+            */
 
+            opacity: 0;
 
+            transition: opacity 1s linear;
 
+            position: absolute;
 
+        }
 
+        #imgBox .active {
 
+            opacity: 1;
 
+        }
 
+        .list {
 
+            overflow: hidden;
 
+            position: absolute;
 
+            bottom: 10px;
 
+            right: 10px;
 
+        }
 
+        .list li {
 
+            float: left;
 
+            width: 20px;
 
+            height: 20px;
 
+            background: #00f;
 
+            color: #fff;
 
+            font-size: 14px;
 
+            text-align: center;
 
+            line-height: 20px;
 
+            border-radius: 50%;
 
+            margin-right: 10px;
 
+        }
 
+        .list .selected {
 
+            background: #ff0;
 
+            color: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="imgBox">
 
+            <img class="active" src="../image/1.jpg" alt="">
 
+            <img src="../image/2.jpg" alt="">
 
+            <img src="../image/3.jpg" alt="">
 
+            <img src="../image/4.jpg" alt="">
 
+            <img src="../image/5.jpg" alt="">
 
+        </div>
 
+        <ul class="list">
 
+            <li class="selected">1</li>
 
+            <li>2</li>
 
+            <li>3</li>
 
+            <li>4</li>
 
+            <li>5</li>
 
+        </ul>
 
+    </div>
 
+    <script src="../js/1.淡入淡出轮播图.js"></script>
 
+</body>
 
+</html>

+ 25 - 0
day13/html/2.获取元素宽度.html
Voir le fichier 

@@ -0,0 +1,25 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        .box {
 
+            width: 400px;
 
+            height: 300px;
 
+            margin-top: 20px;
 
+            margin-left: 40px;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <script src="../js/2.获取元素宽度.js"></script>
 
+</body>
 
+</html>

+ 29 - 0
day13/html/3.小例子.html
Voir le fichier 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+            transition: width 1s linear;
 
+        }
 
+        .box1 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            transition: width 2s linear;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <button id="btn1">放大</button>
 
+    <button id="btn2">缩小</button>
 
+    <div class="box1"></div>
 
+    <script src="../js/3.小例子.js"></script>
 
+</body>
 
+</html>

BIN
day13/image/1.jpg
Voir le fichier


BIN
day13/image/2.jpg
Voir le fichier


BIN
day13/image/3.jpg
Voir le fichier


BIN
day13/image/4.jpg
Voir le fichier


BIN
day13/image/5.jpg
Voir le fichier


+ 19 - 0
day13/js/1.淡入淡出轮播图.js
Voir le fichier 

@@ -0,0 +1,19 @@
 
+// var active = document.querySelector(".active");
 
+// active.onclick = function() {
 
+//     console.log("111")
 
+// }
 
+
 
+var lis = document.querySelectorAll(".list li");
 
+var imgs = document.getElementsByTagName("img");
 
+// var isNow = 0;
 
+for(var i=0;i<lis.length;i++) {
 
+    lis[i].index = i;
 
+    lis[i].onclick = function() {
 
+        for(var j=0;j<lis.length;j++) {
 
+            lis[j].className = '';
 
+            imgs[j].className = '';
 
+        }
 
+        this.className = 'selected';
 
+        imgs[this.index].className = 'active';
 
+    }
 
+}

+ 13 - 0
day13/js/2.获取元素宽度.js
Voir le fichier 

@@ -0,0 +1,13 @@
 
+var box = document.querySelector(".box");
 
+console.log(box);
 
+console.log(box.offsetWidth);
 
+// offsetWidth 获取元素宽度
 
+console.log(box.offsetHeight);
 
+console.log(box.offsetTop);
 
+console.log(box.offsetLeft);
 
+// offsetHeight 获取元素高度
 
+// offsetTop 获取元素距离上级距离
 
+// offsetLeft 获取元素距离左侧距离
 
+// 获取滚动条滚动高度
 
+// document.body.scrollTop
 
+// document.documentElement.scrollTop

+ 29 - 0
day13/js/3.小例子.js
Voir le fichier 

@@ -0,0 +1,29 @@
 
+var box = document.querySelector(".box");
 
+var btn1 = document.getElementById("btn1");
 
+var btn2 = document.getElementById("btn2");
 
+
 
+btn1.onclick = function() {
 
+    var timer1 = setInterval(function(){
 
+        if (box.offsetWidth >= 250) {
 
+            clearInterval(timer1);
 
+        } else {
 
+            box.style.width = box.offsetWidth + 10 + 'px'
 
+        }
 
+    },1000)
 
+}
 
+
 
+box.onclick = function() {
 
+    console.log(box.offsetWidth,'宽度')
 
+
 
+}
 
+
 
+btn2.onclick = function() {
 
+    var timer2 = setInterval(function(){
 
+        if(box.offsetWidth <= 200) {
 
+            clearInterval(timer2);
 
+            console.log(box.offsetWidth)   
+        } else {
 
+            box.style.width = box.offsetWidth - 10 + 'px';
 
+        }
 
+    },1000)
 
+}