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

fix:day12

e il y a 1 an
Parent
d804904895
commit
45ba3b7d18
4 fichiers modifiés avec 0 ajouts et 323 suppressions
Vue séparée Afficher les stats Diff
  1. 0 99
      day12/html/5.轮播图.html
  2. 0 112
      day12/html/6.滑入轮播图.html
  3. 0 65
      day12/js/5.轮播图.js
  4. 0 47
      day12/js/6.滑入轮播图.js

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

@@ -1,99 +0,0 @@
 
-<!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>

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

@@ -1,112 +0,0 @@
 
-<!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>

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

@@ -1,65 +0,0 @@
 
-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)
 
-}

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

@@ -1,47 +0,0 @@
 
-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';
 
-}