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 @@ +