From d7e152fb0f74a5525ba1de94b50bf3f5e25c990a Mon Sep 17 00:00:00 2001
From: kylin L <452061493@qq.com>
Date: Mon, 22 Jan 2024 09:56:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E9=A1=B5=E9=9D=A2=E7=9A=84ba?=
=?UTF-8?q?nner=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../project/smallProgram/css/carouselMy.css | 54 +++++
.../project/smallProgram/js/carouselMy.js | 201 ++++++++++++++++++
.../project/smallProgram/image/settings.html | 63 +++++-
3 files changed, 311 insertions(+), 7 deletions(-)
create mode 100755 lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/project/smallProgram/css/carouselMy.css
create mode 100755 lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/project/smallProgram/js/carouselMy.js
diff --git a/lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/project/smallProgram/css/carouselMy.css b/lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/project/smallProgram/css/carouselMy.css
new file mode 100755
index 00000000..a1cbf2da
--- /dev/null
+++ b/lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/project/smallProgram/css/carouselMy.css
@@ -0,0 +1,54 @@
+/*定义css变量*/
+:root{
+ --mywidth: 500px;
+ --myheight: 100%;
+}
+
+*{
+ margin: 0;
+ padding: 0;
+}
+ul{
+ list-style: none;
+}
+.carousel-contentMy{
+ width: var(--mywidth);
+ height: var(--myheight);
+ position: relative;
+ overflow: hidden;
+ border-radius:10px;
+}
+.carouselMy{
+ height: var(--myheight);
+ position: absolute;
+}
+.carouselMy li{
+ float: left;
+}
+.carouselMy li,.carouselMy li img{
+ width: var(--mywidth);
+ height: var(--myheight);
+}
+.img-indexMy{
+ position: absolute;
+ bottom: 8px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+.img-indexMy li{
+ float: left;
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 10px;
+ background-color: rgba(0,0,0,0.2);
+ font-size: 12px;
+ cursor: pointer;
+ margin: 0 3px;
+ color: #fff;
+}
+.img-indexMy li.js_indexMy,.img-indexMy li:hover{
+ background-color: rgba(0,0,0,0.7);
+}
\ No newline at end of file
diff --git a/lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/project/smallProgram/js/carouselMy.js b/lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/project/smallProgram/js/carouselMy.js
new file mode 100755
index 00000000..7b79a589
--- /dev/null
+++ b/lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/project/smallProgram/js/carouselMy.js
@@ -0,0 +1,201 @@
+(function ($) {
+ $.fn.carouselMy = function (param) {
+ var carouselMy = param.carousel, //轮播框架
+ indexContainer = param.indexContainer, //下标框架
+ list = $(carouselMy).children("li"), //轮播内容
+ len = list.length, //轮播内容数量
+ prev = param.prev, //上翻按钮
+ next = param.next, //下翻按钮
+ timing = param.timing, //自动轮播间隔时间
+ animateTime = param.animateTime, //动画时间
+ autoPlay = param.autoPlay, //自动播放 true/false
+ timer, //定时器
+ index = 1, //索引值
+ indexListMy, //下标列表
+ indexClassName = "js_indexMy", //下标高亮类名
+ action = true, //开始滚动 true/false
+ totalWidtn = list.width() * (list.length + 2), //轮播框架总宽度
+ direction = param.direction; //滚动方向
+ /*初始化*/
+ for (var i = 1; i <= list.length; i++) {
+ $(indexContainer).append("" + i + "");
+ }
+ $(carouselMy)
+ .width(totalWidtn)
+ .append($(list[0]).clone())
+ .prepend($(list[list.length - 1]).clone())
+ .css("left", "-" + list.width() + "px");
+ list = $(carouselMy).children("li");
+ indexListMy = $(indexContainer).children("li");
+ $(indexListMy[index - 1]).addClass(indexClassName);
+
+ /*判断是否自动播放*/
+ if (autoPlay) {
+ startTiming();
+ $(carouselMy + "," + prev + "," + next + "," + indexContainer).hover(
+ function () {
+ window.clearInterval(timer);
+ },
+ function () {
+ startTiming();
+ }
+ );
+ }
+
+ /*计时方法*/
+ function startTiming() {
+ /*判断方向*/
+ switch (direction) {
+ case "right":
+ timer = window.setInterval("$.rightChangeImg();", timing);
+ break;
+ case "left":
+ timer = window.setInterval("$.leftChangeImg();", timing);
+ break;
+ default:
+ timer = window.setInterval("$.leftChangeImg();", timing);
+ }
+ }
+
+ /*切换高亮下标*/
+ $.extend({
+ changeIndexMy: function (index) {
+ $(indexListMy).removeClass(indexClassName);
+ $(indexListMy[index]).addClass(indexClassName);
+ },
+ });
+
+ /*向左切换图片*/
+ $.extend({
+ leftChangeImg: function () {
+ action = false;
+ if (index == len) {
+ index = 0;
+ $(carouselMy).stop(true, true).css("left", "0px");
+ }
+ index++;
+ $(carouselMy)
+ .stop(true, true)
+ .animate(
+ {
+ left: "-=" + list.width() + "px",
+ },
+ animateTime
+ );
+ setTimeout(function () {
+ if (index == len) {
+ index = 0;
+ $(carouselMy).stop(true, true).css("left", "0px");
+ }
+ action = true;
+ }, animateTime);
+ $.changeIndexMy(index - 1);
+ },
+ });
+
+ /*向右切换图片*/
+ $.extend({
+ rightChangeImg: function () {
+ action = false;
+ if (index == 0) {
+ index = len;
+ $(carouselMy)
+ .stop(true, true)
+ .css("left", "-" + left + "px");
+ }
+ index--;
+ var left = totalWidtn - list.width() * 2;
+ $(carouselMy)
+ .stop(true, true)
+ .animate(
+ {
+ left: "+=" + list.width() + "px",
+ },
+ animateTime
+ );
+ setTimeout(function () {
+ if (index == 0) {
+ index = len;
+ $(carouselMy)
+ .stop(true, true)
+ .css("left", "-" + left + "px");
+ }
+ action = true;
+ }, animateTime);
+ if (index == 0) {
+ $.changeIndexMy(len - 1);
+ } else {
+ $.changeIndexMy(index - 1);
+ }
+ },
+ });
+
+ /*下翻点击处理*/
+ $(next).on("click", function () {
+ var nowLeft = Math.abs(parseInt($(carouselMy).css("left")));
+ var left = totalWidtn - list.width() * 2;
+ if (action) {
+ if (nowLeft == left) {
+ index = 0;
+ $(carouselMy).stop(true, true).css("left", "0px");
+ }
+ $.leftChangeImg();
+ }
+ });
+
+ /*上翻点击处理*/
+ $(prev).on("click", function () {
+ var nowLeft = Math.abs(parseInt($(carouselMy).css("left")));
+ var left = totalWidtn - list.width() * 2;
+ if (action) {
+ if (nowLeft == 0) {
+ index = len;
+ $(carouselMy)
+ .stop(true, true)
+ .css("left", "-" + left + "px");
+ }
+ $.rightChangeImg();
+ }
+ });
+
+ /*下标点击处理*/
+ indexListMy.on("click", function () {
+ var no = $(this).index() + 1;
+ if (action) {
+ if (no > index) {
+ $.changeIndexMy(no - 1);
+ action = false;
+ var left = (no - index) * list.width();
+ index = no;
+ $(carouselMy)
+ .stop(true, true)
+ .animate(
+ {
+ left: "-=" + left + "px",
+ },
+ animateTime
+ );
+ setTimeout(function () {
+ action = true;
+ }, animateTime);
+ } else if (no < index) {
+ $.changeIndexMy(no - 1);
+ action = false;
+ var left = (index - no) * list.width();
+ index = no;
+ $(carouselMy)
+ .stop(true, true)
+ .animate(
+ {
+ left: "+=" + left + "px",
+ },
+ animateTime
+ );
+ setTimeout(function () {
+ action = true;
+ }, animateTime);
+ }
+ }
+ });
+ };
+})(jQuery);
diff --git a/lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/smallProgram/image/settings.html b/lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/smallProgram/image/settings.html
index 7bd550b8..2ca9cee6 100644
--- a/lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/smallProgram/image/settings.html
+++ b/lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/smallProgram/image/settings.html
@@ -4,6 +4,7 @@
+