first commit

项目合集/轮播/功能版/js/swiper.js

@@ -0,0 +1,110 @@
+var timer;
+
+// 下一页
+$(".swiper-button-next").onclick = function () {
+  animation(-520)
+}
+
+// 上一页
+$(".swiper-button-prev").onclick = function () {
+  animation(520)
+}
+
+
+// 计算移动距离，和越界处理
+function animation(offset) {
+  var oldOffset = parseInt($(".swiper-wrapper").style.transform.substring(11));
+  var newOffset = oldOffset + offset;
+
+  if (newOffset < -1040) {
+    newOffset = 0
+  };
+
+  if (newOffset > 0) {
+    newOffset =  -1040
+  };
+
+  DotChange(Math.abs(newOffset / 520))
+  changeX(newOffset)
+
+}
+
+
+// 绑定小圆点的点击事件
+var dot = $(".swiper-pagination .swiper-pagination-dot")
+dot.forEach(function (v,i){
+  v.onclick = function () {
+    DotChange(i)
+  }
+})
+
+
+// 切换小圆点
+function DotChange(i) {
+  dot.forEach(function (val,index){
+    val.classList.remove("dot-active")
+  })
+  dot[i].classList.add("dot-active")
+  changeX(i*-520)
+}
+
+// 让图片动起来
+function changeX(x) {
+  $(".swiper-wrapper").style = `
+    transform: translateX(${x}px);
+  `
+}
+
+// 鼠标悬浮，清除定时器
+$(".swiper-container").onmousemove = function () {
+  clearInterval(timer)
+}
+
+// 鼠标离开，自动播放
+$(".swiper-container").onmouseout = function () {
+  AutoPlay()
+}
+
+function AutoPlay() {
+  // 定时器，自动播放
+  timer = setInterval(function (){
+    $(".swiper-button-next").onclick()
+  }, 1000)
+}
+
+AutoPlay()
+
+
+// 模仿框架jq实现 $ 功能
+function $(className) {
+  var classNameArr = className.split(" ");
+
+  if (classNameArr.length == 1) {
+    return document.querySelector(className)
+  } else {
+    // 多类名的时候，获取最后一个类名的上一个类名
+    var fatherClassName = classNameArr[classNameArr.length-2];
+    // 获取最后一个类名
+    var lastClassName = classNameArr[classNameArr.length -1];
+
+    var NewArr = []
+    // 获取父级有多少个子元素
+    var childrenList = document.querySelector(fatherClassName).children;
+    // 返回你要的子元素
+    for (let i = 0; i < childrenList.length; i++) {
+      if (childrenList[i].className.indexOf(lastClassName.replace(".","")) != -1) {
+        NewArr.push(childrenList[i])
+      }
+    }
+
+    return NewArr.length == 1 ? NewArr[0] : NewArr
+    // // 如果只有一个，返回html
+    // if (NewArr.length == 1) {
+    //   return NewArr[0]
+    // // 多个直接返回数组
+    // } else {
+    //   return NewArr
+    // }
+  }
+
+}