旋转轮播动画效果

spring-cloud/server-page/src/main/resources/static/jsc/index.html

@@ -15,27 +15,27 @@
             border-radius: 0%;
             -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
             width: 175px;
-            height: 152px;
+            height: 253px;
         }
         
         .bg1 {
-            background-image: url(./img/1.png);
+            background-image: url(./img/11.png);
         }
         
         .bg2 {
-            background-image: url(./img/2.png);
+            background-image: url(./img/12.png);
         }
         
         .bg3 {
-            background-image: url(./img/3.png);
+            background-image: url(./img/13.png);
         }
         
         .bg4 {
-            background-image: url(./img/4.png);
+            background-image: url(./img/14.png);
         }
         
         .bg5 {
-            background-image: url(./img/5.png);
+            background-image: url(./img/15.png);
         }
     </style>
 </head>
@@ -188,9 +188,10 @@
             </div>
         </div>
     </main>
-    <script src="js/jquery.min.js"></script>
+    <script src="js/jquery-3.5.1.min.js"></script>
     <script src="js/test.js"></script>
     <script>
+        // lunbo
         var items = document.querySelectorAll('.ball');
         // items[0].style['animation-delay'] = '-5s,0s,0s';
         // items[0].querySelector('.item__circle').style['transform'] = 'scale(1.5)';
@@ -200,6 +201,7 @@
             })(i);
         }
 
+        // 轮播上的点击事件
         function onMouseGo() {
             // document.querySelectorAll('.ball').classList.add('active')
             for (var i = 0; i < items.length; i++) {
@@ -207,11 +209,13 @@
                     items[i].classList.add('active')
                 })(i);
             }
+
         }
 
         function onMouseMove() {
             // document.getElementsByClassName('ball').classList.remove('active')
             for (var i = 0; i < items.length; i++) {
+                // 立即执行函数 监听
                 (function(i) {
                     items[i].classList.remove('active')
                 })(i);
@@ -221,6 +225,16 @@
         function clickMsg(e) {
             alert(e.innerText)
         }
+
+        //录播切换对应的换色图片
+        $(".ball").mouseenter(function() {
+            var index = $(this).index()
+            $(this).css("background-image", `url(./img/${index}.png)`)
+        })
+        $(".ball").mouseout(function() {
+            var index = $(this).index()
+            $(this).css("background-image", `url(./img/${index+11}.png)`)
+        })
     </script>
 </body>
 

spring-cloud/server-page/src/main/resources/static/jsc/js/test.js

@@ -4,12 +4,36 @@
 const GATEWAY_URL = "http://192.168.0.95:8084";
 const PAGE_BASIC = GATEWAY_URL + "/basic";
 
+
 $(function() {
+
     // 数据对象
     let dataObj = reqGet(PAGE_BASIC + '/apiNoProcess/scence/getAllSceneAndThemeAndSystem');
 
     let theme = dataObj.sceneThemes; //主题模块
     let scene = dataObj.scenes; //场景类
+    // 变量提升
+    function reqGet(url) {
+        let data = {}
+        $.ajax({
+            type: "GET",
+            url: url,
+            async: false,
+            // 返回数据格式
+            dataType: "json",
+            success: function(res) {
+                data = res.data
+            },
+            error: function(err) {
+                console.log("请求失败！");
+                console.log(err)
+            }
+        });
+        return data
+    };
+
+
+
 
     // 开场动画效果
     (function() {
@@ -305,22 +329,7 @@ $(function() {
     // 除数据数组的长度，向上取值，作为标识id的最大值
 
     // ajax get
-    function reqGet(url) {
-        let data = {}
-        $.ajax({
-            type: "GET",
-            url: url,
-            async: false,
-            // 返回数据格式
-            dataType: "json",
-            success: function(res) {
-                data = res.data
-            },
-            error: function(err) {
-                console.log("请求失败！");
-                console.log(err)
-            }
-        });
-        return data
-    };
+
+
+
 })