Home Explore Help
Sign In
lovecoding
/
VIP20
6
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

new

zsydgithub 2 years ago
parent
40cd940bf5
commit
94030d5ce9
5 changed files with 577 additions and 0 deletions
Split View Show Diff Stats
  1. 157 0
      6_Dom/4_轮播图/2_滑动轮播图.html
  2. 146 0
      6_Dom/4_轮播图/3_淡入淡出轮播图.html
  3. 190 0
      6_Dom/4_轮播图/轮播图.html
  4. 33 0
      6_Dom/5_获取元素宽度.html
  5. 51 0
      6_Dom/6_动画.html

+ 157 - 0
6_Dom/4_轮播图/2_滑动轮播图.html
View File 

@@ -0,0 +1,157 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <link rel="stylesheet" href="font/iconfont.css">
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    ul {
 
+      list-style: none;
 
+    }
 
+
 
+    #container {
 
+      width: 590px;
 
+      height: 470px;
 
+      margin: 100px auto;
 
+      position: relative;
 
+      overflow: hidden;
 
+    }
 
+
 
+    #img-box {
 
+      width: 2950px;
 
+      left: 0;
 
+      position: absolute;
 
+      transition: left 1s linear;
 
+    }
 
+
 
+    #img-box img {
 
+      float: left;
 
+    }
 
+
 
+    #btns {
 
+      position: absolute;
 
+      right: 20px;
 
+      bottom: 20px;
 
+    }
 
+
 
+    #btns li {
 
+      width: 20px;
 
+      height: 20px;
 
+      text-align: center;
 
+      line-height: 20px;
 
+      background: cyan;
 
+      border-radius: 10px;
 
+      color: white;
 
+      float: left;
 
+      margin-right: 7px;
 
+    }
 
+
 
+    #btns .select {
 
+      background: red;
 
+    }
 
+
 
+    #prev,
 
+    #next {
 
+      width: 40px;
 
+      height: 40px;
 
+      position: absolute;
 
+      top: 215px;
 
+      opacity: 0.4;
 
+      /* display: none; */
 
+    }
 
+
 
+    #next {
 
+      right: 0;
 
+    }
 
+
 
+    #prev span {
 
+      font-size: 40px;
 
+    }
 
+
 
+    #next span {
 
+      font-size: 40px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="container">
 
+    <div id="img-box">
 
+      <img class="actived" src="image/1.jpg" alt="">
 
+      <img class="actived" src="image/2.jpg" alt="">
 
+      <img class="actived" src="image/3.jpg" alt="">
 
+      <img class="actived" src="image/4.jpg" alt="">
 
+      <img class="actived" src="image/5.jpg" alt="">
 
+    </div>
 
+    <ul id="btns">
 
+      <li class="select">1</li>
 
+      <li>2</li>
 
+      <li>3</li>
 
+      <li>4</li>
 
+      <li>5</li>
 
+    </ul>
 
+    <div id="prev">
 
+      <span class="iconfont icon-shangyige"></span>
 
+    </div>
 
+    <div id="next">
 
+      <span class="iconfont icon-xiayige"></span>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    //transtion： 延迟方向  延迟时间   Linear匀速
 
+    var btns = document.getElementById('btns')
 
+    var uli = btns.getElementsByTagName('li')
 
+    var imgs = document.getElementsByClassName('actived')
 
+    var imgBox = document.getElementById('img-box')
 
+    var next = document.getElementById('next')
 
+    var prev = document.getElementById('prev')
 
+
 
+    var iNow = 0
 
+    //点击按钮事件
 
+    for (var i = 0; i < uli.length; i++) {
 
+      uli[i].index = i
 
+      uli[i].onclick = function () {
 
+        for (var j = 0; j < uli.length; j++) {
 
+          uli[j].className = ''
 
+        }
 
+        iNow = this.index
 
+        this.className = 'select'
 
+        imgBox.style.left = -590 * iNow + 'px'
 
+      }
 
+    }
 
+    //点击下一个
 
+    next.onclick = function () {
 
+      iNow++;
 
+      if (iNow > 4) {
 
+        iNow = 0
 
+      }
 
+      for (var j = 0; j < uli.length; j++) {
 
+        uli[j].className = ''
 
+      }
 
+      uli[iNow].className = 'select'
 
+      imgBox.style.left = -590 * iNow + 'px'
 
+    }
 
+    //点击上一个
 
+    prev.onclick = function () {
 
+      iNow--;
 
+      if( iNow < 0  ){
 
+        iNow = uli.length - 1
 
+      }
 
+      for (var j = 0; j < uli.length; j++) {
 
+        uli[j].className = ''
 
+      }
 
+      uli[iNow].className = 'select'
 
+      imgBox.style.left = -590 * iNow + 'px'
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 146 - 0
6_Dom/4_轮播图/3_淡入淡出轮播图.html
View File 

@@ -0,0 +1,146 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <link rel="stylesheet" href="font/iconfont.css">
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    ul {
 
+      list-style: none;
 
+    }
 
+
 
+    #container {
 
+      width: 590px;
 
+      height: 470px;
 
+      margin: 100px auto;
 
+      position: relative;
 
+    }
 
+
 
+    #img-box img {
 
+      position: absolute;
 
+      opacity: 0;
 
+      transition: opacity 1s linear;
 
+    }
 
+
 
+    #img-box .actived {
 
+      opacity: 1;
 
+    }
 
+
 
+    #btns {
 
+      position: absolute;
 
+      right: 20px;
 
+      bottom: 20px;
 
+    }
 
+
 
+    #btns li {
 
+      width: 20px;
 
+      height: 20px;
 
+      text-align: center;
 
+      line-height: 20px;
 
+      background: cyan;
 
+      border-radius: 10px;
 
+      color: white;
 
+      float: left;
 
+      margin-right: 7px;
 
+    }
 
+
 
+    #btns .select {
 
+      background: red;
 
+    }
 
+
 
+    #prev,
 
+    #next {
 
+      width: 40px;
 
+      height: 40px;
 
+      position: absolute;
 
+      top: 215px;
 
+      opacity: 0.4;
 
+      /* display: none; */
 
+    }
 
+
 
+    #next {
 
+      right: 0;
 
+    }
 
+
 
+    #prev span {
 
+      font-size: 40px;
 
+    }
 
+
 
+    #next span {
 
+      font-size: 40px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="container">
 
+    <div id="img-box">
 
+      <img class="actived" 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 id="btns">
 
+      <li class="select">1</li>
 
+      <li>2</li>
 
+      <li>3</li>
 
+      <li>4</li>
 
+      <li>5</li>
 
+    </ul>
 
+    <div id="prev">
 
+      <span class="iconfont icon-shangyige"></span>
 
+    </div>
 
+    <div id="next">
 
+      <span class="iconfont icon-xiayige"></span>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var uli = document.getElementsByTagName('li')
 
+    var imgs = document.getElementsByTagName('img')
 
+    var next = document.getElementById('next')
 
+    var prev = document.getElementById('prev')
 
+    var iNow = 0
 
+    //点击按钮事件
 
+    for (var i = 0; i < uli.length; i++) {
 
+      uli[i].index = i
 
+      uli[i].onclick = function () {
 
+        iNow = this.index
 
+        myFun(iNow)
 
+      }
 
+    }
 
+
 
+    next.onclick = function(){
 
+      iNow++;
 
+      if(iNow > 4){
 
+        iNow = 0
 
+      }
 
+      myFun(iNow)
 
+    }
 
+    prev.onclick = function(){
 
+      iNow--;
 
+      if(iNow < 0){
 
+        iNow = 4
 
+      }
 
+      myFun(iNow)
 
+    }
 
+    var myFun = function (xx) {
 
+      for (var j = 0; j < uli.length; j++) {
 
+        uli[j].className = ''
 
+        imgs[j].className = ''
 
+      }
 
+      uli[xx].className = 'select'
 
+      imgs[xx].className = 'actived'
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 190 - 0
6_Dom/4_轮播图/轮播图.html
View File 

@@ -0,0 +1,190 @@
 
+<!-- 
+  author: zsy
 
+  date: 2022-10-29
 
+  轮播图
 
+-->
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <link rel="stylesheet" href="font/iconfont.css">
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    ul {
 
+      list-style: none;
 
+    }
 
+
 
+    #container {
 
+      width: 590px;
 
+      height: 470px;
 
+      margin: 100px auto;
 
+      position: relative;
 
+    }
 
+
 
+    .actived {
 
+      display: none;
 
+    }
 
+
 
+    .choice {
 
+      display: block;
 
+    }
 
+
 
+    #btns {
 
+      position: absolute;
 
+      right: 20px;
 
+      bottom: 20px;
 
+    }
 
+
 
+    #btns li {
 
+      width: 20px;
 
+      height: 20px;
 
+      text-align: center;
 
+      line-height: 20px;
 
+      background: cyan;
 
+      border-radius: 10px;
 
+      color: white;
 
+      float: left;
 
+      margin-right: 7px;
 
+    }
 
+
 
+    #btns .select {
 
+      background: red;
 
+    }
 
+
 
+    #prev,
 
+    #next {
 
+      width: 40px;
 
+      height: 40px;
 
+      position: absolute;
 
+      top: 215px;
 
+      opacity: 0.4;
 
+      display: none;
 
+    }
 
+
 
+    #next {
 
+      right: 0;
 
+    }
 
+
 
+    #prev span {
 
+      font-size: 40px;
 
+    }
 
+
 
+    #next span {
 
+      font-size: 40px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="container">
 
+    <div id="img-box">
 
+      <img class="actived choice" src="image/1.jpg" alt="">
 
+      <img class="actived" src="image/2.jpg" alt="">
 
+      <img class="actived" src="image/3.jpg" alt="">
 
+      <img class="actived" src="image/4.jpg" alt="">
 
+      <img class="actived" src="image/5.jpg" alt="">
 
+    </div>
 
+    <ul id="btns">
 
+      <li class="select">1</li>
 
+      <li>2</li>
 
+      <li>3</li>
 
+      <li>4</li>
 
+      <li>5</li>
 
+    </ul>
 
+    <div id="prev">
 
+      <span class="iconfont icon-shangyige"></span>
 
+    </div>
 
+    <div id="next">
 
+      <span class="iconfont icon-xiayige"></span>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var con = document.getElementById('container')
 
+    var btns = document.getElementById('btns')
 
+    var uli = btns.getElementsByTagName('li')
 
+    var imgs = document.getElementsByClassName('actived')
 
+    var next = document.getElementById('next')
 
+    var prev = document.getElementById('prev')
 
+
 
+    var iNow = 0;
 
+    //循环按钮的每一项
 
+    for (var i = 0; i < uli.length; i++) {
 
+      //给点击的按钮 索引提取出来
 
+      uli[i].index = i
 
+      //按钮的点击事件
 
+      uli[i].onclick = function () {
 
+        // for (var j = 0; j < uli.length; j++) {
 
+        //   uli[j].className = ''
 
+        //   imgs[j].className = 'actived'
 
+        // }
 
+        // iNow = this.index
 
+        // this.className = 'select'// this =>uli[i]
 
+        // imgs[this.index].className = 'actived choice'
 
+        //给全局图片的变量  赋值为当前点击的索引
 
+        iNow = this.index
 
+        //传参
 
+        myFun(iNow)
 
+      }
 
+    }
 
+    //点击下一个
 
+    next.onclick = function () {
 
+      iNow++;
 
+      console.log(iNow)
 
+      if (iNow > 4) {
 
+        iNow = 0
 
+      }
 
+      myFun(iNow)
 
+    }
 
+    //点击上一个
 
+    prev.onclick = function () {
 
+      iNow--;
 
+      if (iNow < 0) {
 
+        iNow = 4 //uli.length
 
+      }
 
+      myFun(iNow)
 
+    }
 
+    //清空样式，找到点击的索引设置样式
 
+    var myFun = function (xx) {
 
+      //清空所有样式
 
+      for (var i = 0; i < uli.length; i++) {
 
+        uli[i].className = ''
 
+        imgs[i].className = 'actived'
 
+      }
 
+      //给点击的按钮设置样式
 
+      uli[xx].className = 'select'
 
+      //找到点击按钮的索引 给相应的图片设置样式
 
+      imgs[xx].className = 'actived choice'
 
+    }
 
+
 
+    //鼠标划入在上面移动 onmousemove
 
+    //鼠标划出 onmouseout
 
+    //鼠标划入事件
 
+    con.onmousemove = function () {
 
+      next.style.display = 'block'
 
+      prev.style.display = 'block'
 
+      clearInterval(timer)
 
+    }
 
+    //鼠标划出事件
 
+    con.onmouseout = function () {
 
+      next.style.display = 'none'
 
+      prev.style.display = 'none'
 
+      timer = setInterval(function () {
 
+        next.onclick()
 
+      }, 1000)
 
+    }
 
+    //设置定时器，自动执行点击下一个事件
 
+    var timer = setInterval(function () {
 
+      next.onclick()
 
+    }, 1000)
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 33 - 0
6_Dom/5_获取元素宽度.html
View File 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      width: 300px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    div1.style.width = '400px'
 
+    console.log(div1.offsetWidth) //获取元素宽度
 
+    console.log(div1.offsetHeight) //获取元素高度
 
+    console.log(div1.offsetTop)  //获取元素距离顶部的距离
 
+    console.log(div1.offsetLeft) //获取元素距离左边的距离
 
+
 
+    console.log(div1.style.width)  //获取内联样式
 
+  </script>
 
+</body>
 
+</html>

+ 51 - 0
6_Dom/6_动画.html
View File 

@@ -0,0 +1,51 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+      transition:  width 3s linear;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <button id="up">放大</button>
 
+  <div id="div1"></div>
 
+  <button id="down">缩小</button>
 
+  <script>
 
+    var up = document.getElementById('up')
 
+    var down = document.getElementById('down')
 
+    var div1 = document.getElementById('div1')
 
+
 
+    // up.onclick = function(){
 
+    //   var timer = setInterval(function(){
 
+    //     if(div1.offsetWidth >= 600){
 
+    //       clearInterval(timer)
 
+    //     }else{
 
+    //       div1.style.width = div1.offsetWidth + 10 + 'px'
 
+    //       console.log(div1.offsetWidth)
 
+    //     }
 
+    //   },10)
 
+    // }
 
+    // down.onclick = function(){
 
+    //   var timer1 = setInterval(function(){
 
+    //     if(div1.offsetWidth <= 200){
 
+    //       clearInterval(timer1)
 
+    //     } else {
 
+    //       div1.style.width = div1.offsetWidth - 10 +'px'
 
+    //     }
 
+    //   },10)
 
+    // }
 
+
 
+    up.onclick = function(){
 
+      div1.style.width = '600px'
 
+    }
 
+  </script>
 
+</body>
 
+</html>