Create slideimg.min.js

js/slideimg.min.js

@@ -0,0 +1,176 @@
+(function () {
+  function Slider(option) {
+    this.wrap = option.wrap;
+    this.imgList = option.imgList;
+    this.imgNum = this.imgList.length;
+    this.width = option.width || $(this.wrap).width();
+    this.height = option.height || $(this.wrap).height();
+    this.isAuto = option.isAuto || true;
+    this.moveTime = option.moveTime;
+    this.direction = option.direction || "right";
+    this.btnWidth = option.btnWidth;
+    this.btnHeight = option.btnHeight;
+    this.spanWidth = option.spanWidth;
+    this.spanHeight = option.spanHeight;
+    this.spanColor = option.spanColor;
+    this.activeSpanColor = option.activeSpanColor;
+    this.btnBackgroundColor = option.btnBackgroundColor;
+    this.spanRadius = option.spanRadius;
+    this.spanMargin = option.spanMargin;
+    this.flag = false;
+    this.nowIndex = 0;
+    this.createDom();
+    this.initStyle();
+    this.bindEvent();
+    if (this.isAuto === true) {
+      this.autoMove();
+    }
+  }
+
+  Slider.prototype.createDom = function () {
+    var oUl = $('<ul class="imgList"></ul>');
+    var Spot = $('<div class="spot"></div>');
+    this.imgList.forEach(function (item) {
+      var oLi =
+        '<li><a  href=" ' +
+        item.a +
+        'target="_blank" "><img src=" ' +
+        item.img +
+        ' "></a></li>';
+      oUl.append(oLi);
+      var span = "<span></span>";
+      Spot.append(span);
+    });
+    var leftBtn = $(
+      '<div class="left-btn"><i class="fas fa-angle-left"></i></div>'
+    );
+    var rightBtn = $(
+      '<div class="right-btn"><i class="fas fa-angle-right"></i></div>'
+    );
+    this.wrap.append(oUl).append(leftBtn).append(rightBtn).append(Spot);
+  };
+  Slider.prototype.initStyle = function () {
+    $("*", this.wrap).css({ margin: 0, padding: 0, listStyle: "none" });
+    $(this.wrap).css({ overflow: "hidden", position: "relative" });
+    $(".imgList", this.wrap).css({
+      width: this.width,
+      height: this.height,
+      position: "relative",
+    });
+    $(".imgList li", this.wrap)
+      .css({
+        width: this.width,
+        height: this.height,
+        position: "absolute",
+        left: 0,
+        top: 0,
+        display: "none",
+      })
+      .eq(this.nowIndex)
+      .css({ display: "block" });
+    $(".imgList li a, .imgList li a img", this.wrap).css({
+      display: "inline-block",
+      width: this.width,
+      height: this.height,
+    });
+    $(".left-btn, .right-btn", this.wrap).css({
+      width: this.btnWidth,
+      height: this.btnHeight,
+      backgroundColor: this.btnBackgroundColor,
+      color: "#fff",
+      textAlign: "center",
+      lineHeight: this.btnHeight + "px",
+      position: "absolute",
+      top: "50%",
+      marginTop: -this.btnHeight / 2,
+      cursor: "pointer",
+    });
+    $(".right-btn", this.wrap).css({ right: 0 });
+    $(".spot", this.wrap).css({
+      height: this.spanHeight + this.spanMargin * 2,
+      position: "absolute",
+      left: "50%",
+      marginLeft: (-this.imgNum * (this.spanWidth + this.spanMargin * 2)) / 2,
+      bottom: 10,
+    });
+    $(".spot span", this.wrap)
+      .css({
+        display: "inline-block",
+        width: this.spanWidth,
+        height: this.spanHeight,
+        margin: this.spanMargin,
+        backgroundColor: this.spanColor,
+        borderRadius: this.spanRadius,
+        cursor: "pointer",
+      })
+      .eq(this.nowIndex)
+      .css({ backgroundColor: this.activeSpanColor });
+  };
+  Slider.prototype.bindEvent = function () {
+    var self = this;
+    $(".left-btn", this.wrap).click(function () {
+      self.move("prev");
+    });
+    $(".right-btn", this.wrap).click(function () {
+      self.move("next");
+    });
+    $(".spot span").click(function (e) {
+      self.move($(this).index());
+    });
+    $(this.wrap).mouseenter(function () {
+      clearInterval(self.time);
+    });
+  };
+  Slider.prototype.move = function (dir) {
+    if (this.flag) {
+      return false;
+    }
+    this.flag = true;
+    switch (dir) {
+      case "prev":
+        if (this.nowIndex === 0) {
+          this.nowIndex = this.imgNum - 1;
+        } else {
+          this.nowIndex--;
+        }
+        break;
+      case "next":
+        if (this.nowIndex === this.imgNum - 1) {
+          this.nowIndex = 0;
+        } else {
+          this.nowIndex++;
+        }
+        break;
+      default:
+        this.nowIndex = dir;
+        break;
+    }
+    var self = this;
+    $(".imgList li", this.wrap)
+      .fadeOut()
+      .eq(this.nowIndex)
+      .fadeIn(function () {
+        self.flag = false;
+      });
+    $(".spot  span", this.wrap)
+      .css({ backgroundColor: this.spanColor })
+      .eq(this.nowIndex % this.imgNum)
+      .css({ backgroundColor: this.activeSpanColor });
+  };
+  Slider.prototype.autoMove = function () {
+    var self = this;
+    this.time = setInterval(function () {
+      if (this.direction == "left") {
+        $(".left-btn", this.wrap).trigger("click");
+      } else {
+        $(".right-btn", this.wrap).trigger("click");
+      }
+    }, self.moveTime);
+  };
+  $.fn.extend({
+    slider: function (option) {
+      option.wrap = this;
+      new Slider(option);
+    },
+  });
+})();