push all files

2025-02-18 23:22:40 +08:00
commit c4db92ee35
115 changed files with 6014 additions and 0 deletions
--- a/js/index.js
+++ b/js/index.js
@@ -0,0 +1,135 @@
+window.addEventListener('load', function () {
+    var arrow_l = this.document.querySelector('.arrow_left');
+    var arrow_r = this.document.querySelector('.arrow_right');
+    var focus = this.document.querySelector('.focus');
+    focus.addEventListener('mouseenter', function () {
+        arrow_l.style.display = 'block';
+        arrow_r.style.display = 'block';
+        clearInterval(timer)
+        timer = null; // 清楚定时器变量
+    })
+    focus.addEventListener('mouseleave', function () {
+        arrow_l.style.display = 'none';
+        arrow_r.style.display = 'none';
+        timer = setInterval(function () {
+            // 手动调用事件
+            arrow_r.click();
+        }, 5000)
+    })
+    var ul = focus.querySelector('ul');
+    var ol = focus.querySelector('.spot');  // 获取 focus 中的 ol
+    // console.log(ul.children.length);
+
+    var num = 0; // 通过箭头控制播放图片的变量
+    var circle = 0; //通过小圆圈的播放图片的变量
+
+    var focusWidth = focus.offsetWidth;
+    for (var i = 0; i < ul.children.length; i++) {
+        // 创建 li
+        var li = this.document.createElement('li');
+
+        li.setAttribute('index', i) // 记录当前 小圆圈的索引号
+
+        // 插入 ul
+        ol.appendChild(li);
+
+        // 创建 li 的同时给 该li 绑定事件，点到此li，此li变色，其他所有li褪色(排他思想)
+        li.addEventListener('click', function () {
+            for (var i = 0; i < ol.children.length; i++) {
+                ol.children[i].className = '';
+            }
+            this.className = 'current'
+            // 点击 小圆圈，移动图片
+            // ul 移动的距离就是小圆圈的索引号 乘以图片的宽度，注意是 负值，往左走
+            var index = this.getAttribute('index') // 获取当前小 li 的索引号
+
+            // 同步思想
+            circle = num = index; // 当点击了某个li，就把小li的索引号给num和circle，这样可以解决不管是通过箭头还是小圆圈播放图片，都不会错序
+
+            animate(ul, -index * focusWidth);
+
+        })
+    }
+    // ol 第一个 li 类名设置为 current
+    ol.children[0].className = 'current';
+
+    // 克隆第一张图片，放在ul的最后面
+    var first = ul.children[0].cloneNode(true)  // 深拷贝
+    ul.appendChild(first);
+
+    // 左右侧点击事件
+    var flag = true; // 节流阀
+    arrow_r.addEventListener('click', function () {
+        if (flag) {
+            // flag = false;  //停用节流阀功能
+            if (num == ul.children.length - 1) {
+                ul.style.left = 0;
+                num = 0;
+            }
+            num++;
+            animate(ul, -focusWidth * num, function () {
+                flag = true; // 此次移动结束后放开节流阀
+            });
+
+            circle++;
+            // 如果走到最后克隆的图片，则重置 circle的值即可
+            if (circle == ol.children.length) {
+                circle = 0;
+            }
+            circleChange();
+        }
+    })
+
+    arrow_l.addEventListener('click', function () {
+        if (num == 0) {
+            num = ul.children.length - 1;
+            ul.style.left = -num * focusWidth + 'px';
+        }
+        num--;
+        animate(ul, -focusWidth * num);
+
+        circle--;
+        // 当 circle小于0时，讲circle值设置为最后一个
+        if (circle < 0) {
+            circle = ol.children.length - 1;
+        }
+        circleChange();
+    })
+    function circleChange() {
+        // 排他思想,清除所有的ol 下 li的current
+        for (var i = 0; i < ol.children.length; i++) {
+            ol.children[i].className = '';
+        }
+        ol.children[circle].className = 'current'; // 只保留当前的小 li 为current状态
+    }
+
+    var timer = setInterval(function () {
+        // 手动调用事件
+        arrow_r.click();
+    }, 5000)
+
+
+    var rettop = this.document.querySelector('.returntop');  // 侧边栏返回顶部模块
+    var recomment = this.document.querySelector('.recommend')  // 推荐模块
+    //页面滚动事件
+    this.document.addEventListener('scroll', function () {
+        // console.log(window.pageYOffset); // 页面被卷曲的头部
+        // console.log(recomment.offsetTop);
+        if (window.pageYOffset >= recomment.offsetTop) {
+            rettop.style.display = 'block';
+        } else {
+            rettop.style.display = 'none';
+        }
+    })
+
+    // 返回顶部事件
+    rettop.addEventListener('click', function () {
+        // window.scroll(0, 0);  // 瞬间返回
+        animateY(window, 0)
+    })
+
+
+    // 楼梯跳转
+    var guesslike = this.document.querySelector('.guesslike');
+    console.log(guesslike.offsetTop);
+})