Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
VIP28
9
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

new

zsydgithub 1 жил өмнө
parent
2ae3817e87
commit
9420cf1b0d
2 өөрчлөгдсөн 303 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 127 0
      Dom/4_轮播图/2_轮播图.html
  2. 176 0
      Dom/4_轮播图/轮播图.html

+ 127 - 0
Dom/4_轮播图/2_轮播图.html
Файл харах 

@@ -0,0 +1,127 @@
 
+<!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;
 
+    }
 
+
 
+    ul {
 
+      list-style: none;
 
+    }
 
+
 
+    #container {
 
+      width: 590px;
 
+      height: 470px;
 
+      overflow: hidden;
 
+      margin: 100px auto;
 
+      position: relative;
 
+    }
 
+
 
+    #img-box {
 
+      width: 2950px;
 
+      position: absolute;
 
+      left: 0;
 
+      /* 向左移动  延迟时间  匀速执行 */
 
+      transition: left 2s linear;
 
+    }
 
+
 
+    #img-box img {
 
+      float: left;
 
+    }
 
+
 
+    #btns {
 
+      position: absolute;
 
+      right: 10px;
 
+      bottom: 10px;
 
+    }
 
+
 
+    #btns li {
 
+      width: 20px;
 
+      height: 20px;
 
+      background: aqua;
 
+      color: #eee;
 
+      border-radius: 10px;
 
+      text-align: center;
 
+      line-height: 20px;
 
+      float: left;
 
+      margin-right: 5px;
 
+    }
 
+
 
+    #btns .select {
 
+      background: red;
 
+    }
 
+
 
+    #next,
 
+    #prev {
 
+      width: 40px;
 
+      height: 40px;
 
+      position: absolute;
 
+      top: 215px;
 
+      opacity: 0.4;
 
+      display: none;
 
+    }
 
+
 
+    #next {
 
+      right: 0;
 
+    }
 
+
 
+    #next span {
 
+      font-size: 40px;
 
+    }
 
+
 
+    #prev span {
 
+      font-size: 40px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="container">
 
+    <div id="img-box">
 
+      <img class="selected choice" src="image/1.jpg" alt="">
 
+      <img class="selected" src="image/2.jpg" alt="">
 
+      <img class="selected" src="image/3.jpg" alt="">
 
+      <img class="selected" src="image/4.jpg" alt="">
 
+      <img class="selected" 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="next">
 
+      <span class="iconfont icon-24gl-nextSquare"></span>
 
+    </div>
 
+    <div id="prev">
 
+      <span class="iconfont icon-24gl-previousSquare"></span>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var btn = document.getElementsByTagName('li')
 
+    var imgs = document.getElementsByClassName('selected')
 
+    var imgBox = document.getElementById('img-box')
 
+
 
+    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.className = 'select'
 
+        imgBox.style.left = -590 * this.index + 'px'
 
+      }
 
+
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 176 - 0
Dom/4_轮播图/轮播图.html
Файл харах 

@@ -0,0 +1,176 @@
 
+<!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="icon/iconfont.css">
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    ul {
 
+      list-style: none;
 
+    }
 
+
 
+    #container {
 
+      width: 590px;
 
+      height: 470px;
 
+      margin: 100px auto;
 
+      position: relative;
 
+    }
 
+
 
+    .selected {
 
+      display: none;
 
+    }
 
+
 
+    .choice {
 
+      display: block;
 
+    }
 
+
 
+    #btns {
 
+      position: absolute;
 
+      right: 10px;
 
+      bottom: 10px;
 
+    }
 
+
 
+    #btns li {
 
+      width: 20px;
 
+      height: 20px;
 
+      background: aqua;
 
+      color: #eee;
 
+      border-radius: 10px;
 
+      text-align: center;
 
+      line-height: 20px;
 
+      float: left;
 
+      margin-right: 5px;
 
+    }
 
+
 
+    #btns .select {
 
+      background: red;
 
+    }
 
+
 
+    #next,
 
+    #prev {
 
+      width: 40px;
 
+      height: 40px;
 
+      position: absolute;
 
+      top: 215px;
 
+      opacity: 0.4;
 
+      display: none;
 
+    }
 
+
 
+    #next {
 
+      right: 0;
 
+    }
 
+
 
+    #next span {
 
+      font-size: 40px;
 
+    }
 
+
 
+    #prev span {
 
+      font-size: 40px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="container">
 
+    <div id="img-box">
 
+      <img class="selected choice" src="image/1.jpg" alt="">
 
+      <img class="selected" src="image/2.jpg" alt="">
 
+      <img class="selected" src="image/3.jpg" alt="">
 
+      <img class="selected" src="image/4.jpg" alt="">
 
+      <img class="selected" 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="next">
 
+      <span class="iconfont icon-24gl-nextSquare"></span>
 
+    </div>
 
+    <div id="prev">
 
+      <span class="iconfont icon-24gl-previousSquare"></span>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var btn = document.getElementsByTagName('li')
 
+    var imgs = document.getElementsByClassName('selected')
 
+    var next = document.getElementById('next')
 
+    var prev = document.getElementById('prev')
 
+    var container = document.getElementById('container')
 
+
 
+    iNow = 0;
 
+    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 = ''
 
+          imgs[j].className = "selected"
 
+        }
 
+        this.className = 'select'
 
+        imgs[this.index].className = 'selected choice'
 
+        iNow = this.index
 
+      }
 
+    }
 
+    //下一个点击事件
 
+    next.onclick = function () {
 
+      console.log(iNow)
 
+      iNow++;
 
+      if (iNow > btn.length - 1) {
 
+        iNow = 0
 
+      }
 
+      // for (var i = 0; i < btn.length; i++) {
 
+      //   btn[i].className = ''
 
+      //   imgs[i].className = "selected"
 
+      // }
 
+      // btn[iNow].className = 'select'
 
+      // imgs[iNow].className = 'selected choice'
 
+      myFun(iNow)
 
+    }
 
+    //上一个点击事件
 
+    prev.onclick = function () {
 
+      iNow--;
 
+      if (iNow < 0) {
 
+        iNow = btn.length - 1
 
+      }
 
+      myFun(iNow)
 
+    }
 
+    //鼠标划入事件
 
+    container.onmousemove = function () {
 
+      next.style.display = 'block'
 
+      prev.style.display = 'block'
 
+      clearInterval(timer)
 
+    }
 
+    //鼠标划出事件
 
+    container.onmouseout = function () {
 
+      next.style.display = 'none'
 
+      prev.style.display = 'none'
 
+      timer = setInterval(function () {
 
+        next.onclick()
 
+      }, 2000)
 
+    }
 
+    //定时器
 
+    var timer = setInterval(function () {
 
+      next.onclick()
 
+    }, 2000)
 
+    var myFun = function (xx) {
 
+      for (var i = 0; i < btn.length; i++) {
 
+        btn[i].className = ''
 
+        imgs[i].className = "selected"
 
+      }
 
+      btn[xx].className = 'select'
 
+      imgs[xx].className = 'selected choice'
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>