jq写轮播图

转角羊儿

已于 2022-12-17 22:53:11 修改

阅读量676

点赞数

分类专栏：小案例文章标签： javascript 动画前端

于 2022-12-17 22:46:17 首次发布

本文链接：https://blog.csdn.net/qq_41988669/article/details/128358305

版权

小案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <div class="wrapper"></div>

        <div class="deom"></div>

        <script src="./jquery-3.3.1.js"></script>
        <script src="./demo.js"></script>
        <script>
            //运动方式  animationType
            //小圆点是否展示    showSpot
            //图片列表  imgList
            //左右按钮是否展示  showBtn
            //动画时间  time
            //图片尺寸  imgWidth    imgHeight

            //$.extend({add: function() {}})   ---> 工具方法   $.add()
            //$.fn.extend({add: function () {}})   ---> 实例方法   $('.demo').add()

            $('.wrapper').swiper({
                animationType: 'fade',
                showSpot: true,
                imgList: [
                    {
                        href: '#1',
                        // 一个点代表当前路径，二个点代表上一级
                        src: './image/1.png',
                    },
                    {
                        href: '#2',
                        src: './image/2.png',
                    },
                    {
                        href: '#3',
                        src: './image/3.png',
                    },
                    {
                        href: '#4',
                        src: './image/4.png',
                    },
                ],
                imgBtn: true,
                time: 1000,
                imgWidth: 350,
                imgHeight: 300,
                isAuto: true,
            })

            $('.deom').swiper({
                animationType: 'animate',
                showSpot: true,
                imgList: [
                    {
                        href: '#1',
                        src: './image/pic1.jpg',
                    },
                    {
                        href: '#2',
                        src: './image/pic2.jpg',
                    },
                    {
                        href: '#3',
                        src: './image/pic3.jpg',
                    },
                ],
                imgBtn: true,
                time: 1000,
                imgWidth: 350,
                imgHeight: 300,
                isAuto: true,
            })
        </script>
    </body>
</html>

 // 动画以当前展示图片的索引值 与 轮播图片数量作为切入点
//运动方式  animationType
//小圆点是否展示    showSpot
//图片列表  imgList
//左右按钮是否展示  showBtn
//动画时间  time
//图片尺寸  imgWidth    imgHeight
// 是否为自动播放  isAuto

(function () {
  function Swiper(options, wrap) {
    // wrap = this; 这个this是指父级Wrapper,是为了取到Wrapper宽高
    // 轮播图添加到的父级
    this.wrap = wrap;
    // 是否自动轮播
    this.isAuto = options.isAuto;
    // 轮播图片动画类型
    this.animationType = options.animationType || "fade";

    // 轮播图片列表
    this.imgList = options.imgList || [];

    // 是否展示点击按钮
    this.imgBtn = options.imgBtn == undefined ? true : options.imgBtn;
    // 是否展示轮播小圆点
    this.showSpot = options.showSpot == undefined ? true : options.showSpot;

    //隔格时间
    this.time = options.time || 2000;

    // 每张图片宽度
    this.imgWidth = options.imgWidth || $(this.wrap).width();
    // 每张图片的高度
    this.imgHeight = options.imgHeight || $(this.wrap).height();

    // 自动轮播定时器
    this.timer = null;

    // 当前展示图片的索引值
    this.nowIndex = 0;
    // 动画是否正在执行
    this.lock = false; //锁开着
    // 轮播图片数量
    this.imgLength = this.imgList.length; //图片的索引长度
    // 初始化函数
    this.init = function () {
      this.createDom(); //把创建轮播图的结构放在一个方法里面
      this.initCss();
      this.bindEvent();
      if (this.isAuto) {
        this.AutoChange();
      }
    };
  }

  //把创建轮播图的结构放在原型链上减少内存空间，不用每一次新建对象都要创建结构

  // 初始化结构：创建dom元素
  Swiper.prototype.createDom = function () {
    // 创建轮播图图片区域
    var swiperDiv = $('<div class="my-swiper"></div>'); //轮播区
    var imgUl = $('<ul class="img-list"></ul>'); //图片区
    var spotDiv = $('<div class="spot"></div>'); //小圆点
    this.imgList.forEach(function (item) {
      $(
        '<li><a href="' +
          item.href +
          '"><img src="' +
          item.src +
          '"></img></a></li>'
      ).appendTo(imgUl);
      $("<span></span>").appendTo(spotDiv); //增加一个小圆点
    });
    imgUl.find("li").eq(0).clone().appendTo(imgUl); //在ul的后面增加第一个li dom
    imgUl.appendTo(swiperDiv);

    //增加按钮
    if (this.imgBtn) {
      // $('<div class="left-btn">&lt;</div>').appendTo(swiperDiv);
      // $('<div class="right-btn">&gt;</div>').appendTo(swiperDiv);
      $(swiperDiv)
        .append($('<div class="left-btn btn">&lt;</div>'))
        .append($('<div class="right-btn btn">&gt;</div>'));
    }

    if (this.showSpot) {
      swiperDiv.append(spotDiv);
    }
    $(this.wrap).append(swiperDiv);
  };

  // 初始化样式
  Swiper.prototype.initCss = function () {
    // 第一参数是选择器  第二个参数是作用域
    $(".my-swiper", this.wrap).css({
      width: this.imgWidth,
      height: this.imgHeight,
      position: "relative",
    });
    $(".my-swiper *", this.wrap).css({
      listStyle: "none",
      padding: 0,
      margin: 0,
    });
    $("a", this.wrap).css({
      display: "inline-block",
      width: "100%",
      height: "100%",
    });
    $("img", this.wrap).css({
      width: "100%",
      height: "100%",
    });
    //运动模式是渐变
    if (this.animationType == "fade") {
      $(".img-list > li", this.wrap)
        .css({
          position: "absolute",
          width: this.imgWidth,
          height: this.imgHeight,
          display: "none",
        })
        .eq(this.nowIndex)
        .css("display", "block");
    } else if ((this.animationType = "animate")) {
      $(this.wrap).css({
        position: "relative",
        overflow: "hidden",
        width: this.imgWidth,
      });
      $(".img-list", this.wrap).css({
        //ul
        width: this.imgWidth * (this.imgLength + 1),
        height: this.imgHeight,
        position: "absolute",
      });
      $(".img-list > li", this.wrap).css({
        float: "left",
        width: this.imgWidth,
        height: this.imgHeight,
      });
    }
    $(".btn", this.wrap)
      .css({
        width: 25,
        height: 35,
        backgroundColor: "rgba(0, 0, 0, .5)",
        color: "#fff",
        position: "absolute",
        top: "50%",
        marginTop: -17.5,
        lineHeight: "35px", //直接写数值表示字体大小的多少倍
        textAlign: "center",
        cursor: "pointer",
      })
      .filter(".right-btn")
      .css({
        right: 0,
      });
    $(".spot", this.wrap).css({
      position: "absolute",
      bottom: 0,
      width: "100%",
      textAlign: "center",
    });
    $(".spot > span", this.wrap)
      .css({
        display: "inline-block",
        width: 10,
        height: 10,
        margin: "10px 5px",
        borderRadius: "50%",
        backgroundColor: "#ddd",
        cursor: "pointer",
      })
      .eq(this.nowIndex)
      .css({
        backgroundColor: "#fff",
      });
  };
  //事件
  Swiper.prototype.bindEvent = function () {
    var self = this; // 这里的this指swiper对象
    $(".left-btn", this.wrap).click(function () {
      // 这里的this指left-btn按钮

      // 判断锁是否true(当锁是true时锁是关闭着的),是true就返回
      if (self.lock) {
        return false;
      }
      // 当锁为false时(锁是开着的)，则关上锁
      self.lock = true; //关上锁

      if (self.nowIndex == 0) {
        // 如果动画类型时animate的话 图片要瞬间移动到最后一张图片的位置上再进行动画效果
        if (self.animationType == "animate") {
          $(".img-list", self.wrap).css({
            left: -self.imgWidth * self.imgLength,
          });
        }
        // 当前图片索引值为0时点击上一张将要展示最后一张图片索引值为imgNum - 1
        self.nowIndex = self.imgLength - 1;
      } else {
        self.nowIndex--;
      }
      self.change();
    });

    $(".right-btn", this.wrap).click(function () {
      // 判断锁是否true(当锁是true时锁是关闭着的),是true就返回
      if (self.lock) {
        return false;
      }
      // 当锁为false时(锁是开着的)，则关上锁
      self.lock = true; //关上锁

      // 当动画效果是fade的时候，新增li个数等于图片的个数，且索引值等于最后一张图片时，让它的索引值变到第一张的位置
      if (self.nowIndex == self.imgLength - 1 && self.animationType == "fade") {
        self.nowIndex = 0;
      } else {
        // 如动画效果是animate,或者索引不是最后一张图片时
        // 处理animate最后一张图片的效果
        if (self.nowIndex == self.imgLength) {
          $(".img-list", self.wrap).css({
            left: 0,
          });
          // 当图片瞬间变得第一张图片时，下一张就是第一张图片
          self.nowIndex = 1;
        } else {
          self.nowIndex++;
        }
      }
      // 调用动画
      self.change();
    });
    $(".spot > span", this.wrap).click(function () {
      // 判断锁是否true(当锁是true时锁是关闭着的),是true就返回
      if (self.lock) {
        return false;
      }
      // 当锁为false时(锁是开着的)，则关上锁
      self.lock = true; //关上锁

      console.log($(this).index());
      self.nowIndex = $(this).index();
      // 调用动画
      self.change();
    });
    $(this.wrap)
      //当鼠标指针进入
      .mouseenter(function () {
        clearInterval(self.timer);
      })
      .mouseleave(function () {
        if (self.isAuto) {
          self.AutoChange();
        }
      });
  };
  // 动画函数
  Swiper.prototype.change = function () {
    var self = this;
    if (this.animationType == "fade") {
      $(".img-list > li", this.wrap)
        .fadeOut()
        .eq(this.nowIndex)
        .fadeIn(function () {
          self.lock = false;
        });
    } else if (this.animationType == "animate") {
      $(".img-list", this.wrap).animate(
        {
          left: -this.nowIndex * this.imgWidth,
        },
        function () {
          self.lock = false;
        }
      );
    }

    // $('.img-list > li', this.wrap).fadeOut().eq(this.nowIndex).fadeIn();

    $(".spot > span", this.wrap)
      .css({
        backgroundColor: "#ddd",
        // this.imgLength等于标签的个数
      })
      .eq(this.nowIndex % this.imgLength)
      .css("backgroundColor", "#fff");
  };
  // 加增自动播放
  Swiper.prototype.AutoChange = function () {
    var self = this;
    this.timer = setInterval(function () {
      // 自动触发点击事件,其他事件自动触发用trigger
      $(".right-btn", self.wrap).click();
    }, this.time);
  };

  $.fn.extend({
    swiper: function (options) {
      // options.wrap = this;
      var obj = new Swiper(options, this);
      obj.init();
    },
  });
})();

转角羊儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq写轮播图

/$.fn.extend({add: function () {}}) ---> 实例方法 $('.demo').add()//$.extend({add: function() {}}) ---> 工具方法 $.add()//图片尺寸 imgWidth imgHeight。//运动方式 animationType。//小圆点是否展示 showSpot。//左右按钮是否展示 showBtn。//图片列表 imgList。//动画时间 time。
复制链接

扫一扫