案例 - 无缝轮播图面向对象两种写法

最新推荐文章于 2024-02-10 14:19:14 发布
最新推荐文章于 2024-02-10 14:19:14 发布
阅读量476 收藏 2
点赞数 1
分类专栏： Js案例 ES6 文章标签： js javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42863800/article/details/103965297
版权

Ⅰ- 壹 - 无缝轮播图展示

在这里插入图片描述

一功能说明：

利用模块开发引入html;导入模块 需要实例化对象进行操作

  1. 可以创建多个轮播图，互不干扰
  2. 第一种写法中，只有用到Utils.js 工具类
  3. 第二种写法中，用到Utils.js 工具类和Loadlmage.js 预加载

Ⅱ - 贰 - HTML结构

在这里插入图片描述

Ⅲ - 叁 - 无缝轮播图原理

在这里插入图片描述

Ⅳ - 肆 - 代码区域

Carousel.js实现类思维导图

在这里插入图片描述

一 第一种写法

HTML
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/* 设置rem格式 */
			html{
				font-size: 100px;
			}
			body{
				font-size: 16px;
				margin: 0;
				padding: 0;
				border: 1px solid seagreen;
			}
		  
		</style>
	</head>
	<body>
		
	</body>

 <script type="module">
	 //引用Carouse.js
	 import Carousel from "./js/Carousel.js";
	 //轮播图片储存在一个数组內，
	 let arr = ["a.png", "b.png", "c.png", "d.png", "e.png"];

	//实例化Carouse.js
	let carousel=new Carousel(arr,"./img/",1200,400);
	carousel.appendTo("body");

	animation();
	function animation(){
		requestAnimationFrame(animation);
            Carousel.update();
	}
	window.addEventListener("resize",);
        function resizeHandler(e){
            document.documentElement.style.fontSize=(document.documentElement.clientWidth/screen.width)*100+"px"
        }
 </script>

</html>
Carousel.js实现类
import Utils from "./Utils.js";//引用Utils.js
export default class Carousel {
    position = 0;//储存轮播图数组的下标
    direction = "left";//储存左右按钮的别名
    bnList = [];//储存按钮的点击
    moveBool = false;//按钮点击的状态
    autoBool = false;//自动轮播
    speed =30;//轮播动画速度  为0.03rem
    x = 0;
static carouselList = [];//储存类  
    //list:轮播图的数组    basePath:图片路径  w :轮播图父容器的宽   h:轮播图父容器的高
    constructor(list,basePath,w,h) {
        // 设rem
        // 预加载
        // 预加载完成创建轮播图 
        //实参设为全局变量  this.w,this.h
        this.w = w;
        this.h = h;
        //单例模式  解决了div的创建多次  执行结果轮播图父容器createCarousel()赋值给 this.elem
        this.elem = this.createCarousel();
     
        Carousel.carouselList.push(this);
        Utils.reload(list, _list => this.loadFinish(_list), basePath);//list 数组   callback回调函数    basePath图片路径
    }
    //预加载回调函数
    loadFinish(_list) {
        this.list = _list;//
        this.createImgCon(_list);//
        this.createDot(_list);
        this.createBn();
        this.preChange();
    
    }

    //创建轮播图的父容器  div
    createCarousel() {
        if (this.elem) return this.elem;//单例模型 如果有值就把当前这个返回  不执行下面代码
        //实例化Utils.js    ce()是类似于 Object.assign       Utils.js 的方法ce()使用
        let div = Utils.ce("div");//创建一个div   返回给div这个变量
        //箭头函数会改变this指向Carousel   在mouseHanlder（）函数里 this指向都是Carousel
        // div.addEventListener("mouseenter", e => this.mouseHanlder(e));//当鼠标指针穿过元素时，会发生 mouseenter 事件
        // div.addEventListener("mouseleave", e => this.mouseHanlder(e));//当鼠标指针离开被选元素时，会发生 mouseleave 事件。
        return div;

    }

    //把轮播图的容器插入到哪个容器内的方法    轮播图父容器的父容器     carousel.appendTo("body");
    appendTo(parent) {
        //constructor 属性返回对创建此对象的数组函数的引用。  
        //如果是字符串就获取这个    parent.constructor===String判断是不是字符串
        if (parent.constructor === String) parent = document.querySelector(parent);
        //this.elem：div      把创建的div追加到parent（body）元素   div为body的子元素
        parent.appendChild(this.elem);
        //this.w，this.h 为传过来的参数 分别为1200 400    三目运算如果有值就进行设置  没有值获取元素的宽度
        this.contentWidth = this.w ? Carousel.getRem(this.w) : Carousel.getRem(parent.offsetWidth);
        this.contentHeight = this.h ? Carousel.getRem(this.h) : Carousel.getRem(parent.offsetWidth / 3);//高度为 容器的3/1
        //给div  这个元素添加样式   div样式也为div父容器的宽度和高度
        Object.assign(this.elem.style, {
            width: this.contentWidth + "rem",
            height: this.contentHeight + "rem",
            position: "relative",
            overflow: "hidden",
            border:"1px solid seagreen"
        });

    }

    //显示区域的div的轮播图 的父容器
    createImgCon(list) {
      
        //遍历轮播图数组  给每个图片添加宽高 父容器宽高度
        list.forEach(item => {
            Object.assign(item.style, {
                width: this.contentWidth + "rem",
                height: this.contentHeight + "rem"
            })
        });
        //轮播图的父容器 的宽度是2倍
        this.imgCon = Utils.ce("div", {
            width: this.contentWidth * 2 + "rem",
            height: this.contentHeight + "rem",
            position: "absolute"
        });
        //把第一张图片插入到  轮播图父容器里面 
        this.imgCon.appendChild(list[this.position]);
        //  添加到轮播图父容器的父容器
        this.elem.appendChild(this.imgCon);
    }
    //创建小圆点的方法     _list预加载完成后返回的数组  
    createDot(_list) {
        //创建一个与轮播图父容器div同级的  ul容器
        this.dot = Utils.ce("ul", {
            listStyle: 'none',
            margin: '0px',
            position: 'absolute',
            bottom: Carousel.getRem(20) + "rem"   //20/100    0.2rem
        });
        //局部变量  w
        var w = 0;
        //根据图片数量 创建小圆点
        for (let i = 0; i < _list.length; i++) {
            let li = Utils.ce("li", {
                width: Carousel.getRem(20) + "rem",
                height: Carousel.getRem(20) + "rem",
                borderRadius: "50%",
                float: "left",
                border: "2px solid #FF0000",
                //第一次进入循环 下表为0 的小圆点   设置
                marginLeft: i === 0 ? "0rem" : Carousel.getRem(10) + "rem"  //第一个小圆点 left为0
            });
            //每次循环都会累加20，第一个不累加   ，   0 20  40   60  80  100   120 
            w += 20+(i === 0 ? 0 : 10);
            this.dot.appendChild(li);
        }
        //小圆点的左间隔 设置
        this.dot.style.left = (this.contentWidth - Carousel.getRem(w)) / 2 + "rem";
        this.dot.addEventListener("click", e => this.dotClickHandler(e));//ul添加事件   给每个小圆点绑定事件
        this.elem.appendChild(this.dot);
    }
    //左右按钮
    createBn() {
        //巡皇两次创建两个div
        for (let i = 0; i < 2; i++) {
            //Utils  方法创建
            let bn = Utils.ce("div", {
                //getRem()  方法是从前端获取fontzise的大小进行转换为  rem
                //设置左右按钮的  样式
                width: Carousel.getRem(30) + "rem",
                height: Carousel.getRem(60) + "rem",
                userSelect: "none",
                fontWeight: "bold",
                fontSize: Carousel.getRem(40) + "rem",
                lineHeight: Carousel.getRem(60) + "rem",
                textAlign: "center",
                position: "absolute",
                backgroundColor: "rgba(0,0,0,0.3)",
                top: (this.contentHeight - Carousel.getRem(60)) / 2 + "rem",
                //利用循环  当第一次进入循环 的时候 i=0这时候设置为左边   
                left: i === 0 ? Carousel.getRem(20) + "rem" : "none",
                // i=这时候设置为左边   
                right: i === 1 ? Carousel.getRem(20) + "rem" : "none",
                //左右按钮的  阴影样式
                boxShadow: i === 0 ? "2px 2px 2px #000" : "-2px 2px 2px #000",
            }, {
                //同理根据循环的累加值i  添加标签属性   DOMtextContent 属性设置或返回指定节点的文本内容，以及它的所有后代。
                textContent: i === 0 ? "<" : ">"
            });
            this.bnList.push(bn);//添加到数组bnList  
            bn.addEventListener("click", e => this.bnClickHandler(e));//绑定点击事件
                //把左右按钮追加到参数elem 后面
            this.elem.appendChild(bn);
        }
    }
    //ul事件执行   小圆点点击事件  点击到那个小圆点跳转到哪个图上面
    dotClickHandler(e) {
        if (this.moveBool) return;//为falst 的时候  跳出
        //获取当前点击元素的创建此对象的数组函数的引用。是不是HTMLLIElement
        if (e.target.constructor !== HTMLLIElement) return;
        //ul的子元素li转换为数组对象    根据indexOf查找当前点击的元素   查到之后返回索引值
        var index=Array.from(this.dot.children).indexOf(e.target);
        //position  轮播图的索引值   如果当前点击的索引值等于储存的position值就跳出
        if (index == this.position) return;
        //当前的点击的 li  大于  储存的position     direction：储存左右按钮的别名
        if (index > this.position) {
            this.direction = "left";
        } else {
            this.position = "right";
        }
        this.position = index;
        this.createNextImg();
    }

    //左右按钮事件执行方法
    bnClickHandler(e) {
        if (this.moveBool) return;//控制轮播图的移动 为falst 的时候  进入
        //判断监听事件的这个元素的文本内容
        if (e.currentTarget.textContent === "<") {
            //设置为右
            this.direction = "right";
            //position减一  数组位置
            this.position--;
            //如果position的的值一直触发减到0时  position赋值为储存图片的最大值 
            if (this.position <= 0) this.position = this.list.length - 1;
        } else {
            this.direction = "left";
            this.position++;
            if (this.position > this.list.length - 1) this.position = 0;
        }
        this.createNextImg();//执行方法  点击按钮图片切换方法

    }

    //点击按钮图片切换方法  创建下一张图片
    createNextImg() {
        //判断当前储存左右按钮别名的值direction
        if (this.direction === "left") {
            this.imgCon.appendChild(this.list[this.position]);
            this.imgCon.style.left = "0rem";
            
            this.x = 0;
        } else {
            //获取第一个元素节点:firstElementChild
            //insertBefore() 方法可在已有的子节点前插入一个新的子节点。
            //imgCon:轮播图的父容器 的宽度是2倍
            this.imgCon.insertBefore(this.list[this.position], this.imgCon.firstElementChild);
            this.x = -this.contentWidth;

            this.imgCon.style.left = this.x + "rem";
        }
        this.moveBool = true;
        this.preChange();
    }
      //轮播图小圆点，点击的样式变化
    preChange() {
        //this.pre   当前点击小图标  
        //第一次不进入
        if(this.pre){
            this.pre.style.backgroundColor="rgba(255,0,0,0)";
          
        }
        //this.dot.children[this.position]  根据position  轮播图的索引值  设置 小图标的背景
        this.pre=this.dot.children[this.position];
        //当前点击的  小图标背景设置为  
        this.pre.style.backgroundColor="rgba(255,0,0,1)";
    }
    update(){
        this.moveImg();
    }
    //ul    移动时 的变化  当单击左边时 在
    moveImg(){
        if(!this.moveBool) return;
        if(this.direction==="left"){
           //左按钮点击后    
            this.x-=Carousel.getRem(this.speed);
            this.imgCon.style.left=this.x+"rem";
            if(this.x<=-this.contentWidth){
                this.moveBool=false;
            //移除imgCon的第一个元素
                this.imgCon.firstElementChild.remove();
                this.x=0;
                this.imgCon.style.left=this.x+"rem"; 
            }
        }else{
            this.x+=Carousel.getRem(this.speed);
            this.imgCon.style.left=this.x+"rem";
            if(this.x>=0){
                this.moveBool=false;
                this.imgCon.lastElementChild.remove();
                this.x=0;
                this.imgCon.style.left=this.x+"rem";
            }
        }
    }
    //防止多次创建
    static update(){
        for (let i = 0; i < Carousel.carouselList.length; i++) {
            Carousel.carouselList[i].update();
            
        }
    }
    //静态方法      转换为rem
    static getRem(size) {
        //获取css中样式  fontSize:(100)在html设置增加灵活性          getComputedStyle   css获取样式仅可读
        var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
        //传入的实参除fontSize设置的值
        return size / fontSize;
    }


}

第二种写法

HTML
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      font-size: 100px;
    }

    body {
      font-size: 16px;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <script type="module">
    import Carousel from "./js/Carousel.js"
    window.addEventListener("resize",resizeHandler);//重新修改大小事件  就是窗口缩小
    function resizeHandler(e){
             document.documentElement.style.fontSize=document.documentElement.clientWidth*(100/screen.width)+"px";
    }
    animation();//

    function animation(){
          requestAnimationFrame(animation);
          Carousel.UPDATE();
     }


    // 1.
    //图片数组 
    var arr=["./img/a.png","./img/b.png","./img/c.png","./img/d.png","./img/e.png","./img/left.png","./img/right.png"];
    //
    let carousel=new Carousel(arr);
        carousel.appendTo("body");//追加到body
        carousel.setWH(true);//全屏显示

    // 2.
    var arr1=["./img/a.jpeg","./img/b.jpeg","./img/c.jpeg","./img/d.jpeg","./img/e.jpeg","./img/left.png","./img/right.png"];

    let carousel1=new Carousel(arr1);
        carousel1.appendTo("body");//追加到body
        carousel1.setWH(600,200);//设置宽高


  </script>
</body>

</html>
Carousel.js
import Loadlmage from "./Loadlmage.js";
import Utils from "./Utils.js";
export default class Carousel {

  imgList;//图片数组包括左右按钮
  w;//外部容器宽
  h;//外部容器高
  bnlist;//存放左右按钮的图标
  list;//存放每一张图片  是个数组
  imageCon;// 存放图片容器图片的二倍容器
  parent;//存放轮播图的父容器
  dot;//ui  小圆点的父元素
  dotList = [];//全局储存创建的每个小圆点
  pos = 0;//存放图片的下标
  direction = "";//存放左右按钮的 名字  left right
  bool = false;//控制开关  轮播动画
  x = 0;//轮播图片的横坐标
  speed = 0.5;//偏移量
  autoBool = false;//控制自动轮播的动画
  time = 200;//防抖的初始值
  pre;//控制小圆点的选中
  static carouselList = [];//存放这个轮播图对象

  //参数为 图片数组
  constructor(_imgList) {


    this.imgList = _imgList;//图片数组到全局
    this.carousel = this.createCarousel();//创建外容器
    new Loadlmage(_imgList, list => this.finishHandler(list))//预加载  第一个参数是数组 第二个参数是回调函数
    Carousel.carouselList.push(this);//当前类添加到数组
    console.log(Carousel.carouselList)
  }

  //预加载函数  预加载完成对图片等一些操作
  finishHandler(_list) {
    this.bnlist = _list.splice(-2);//从倒数第二位截取到尾部  获取左右按钮的图片 存为全局
    //this.w  没有值的时候 获取第一张图的宽高作为轮播图的宽高 
    //既 setWH（）  参数为false
    if (!this.w) {
      this.w = Carousel.getRem(_list[0].width);
      this.h = Carousel.getRem(_list[0].height);
    }
    //到此为止w和h正式全部确认完毕  所有都已将加载完毕
    //给每一张图片添加宽高  计算完毕的  w h
    this.list = _list.map(item => {
      item.style.width = this.w + "rem";
      item.style.height = this.h + "rem";
      return item;
    })
    //设置外容器的  宽高
    Object.assign(this.carousel.style, {
      width: this.w + "rem",
      height: this.h + "rem"
    })
    //
    this.createImageCon();//创建图片的二倍容器
    this.createBn();//左右按钮
    this.createDot();//轮播图下的 小圆点
    this.changePre();//点击小圆点的切换
  }
  //创建外容器
  createCarousel() {
    var carousel = Utils.ce("div", {
      position: "relative",
      margin: "auto",
      overflow: "hidden",
      left: 0,
      right: 0,
      backgroundColor: "rgba(255,0,0,0.1)",
    })
    //添加鼠标事件  鼠标移入和鼠标进入 和鼠标移出  用于轮播自动轮播 鼠标悬停停止
    carousel.addEventListener("mouseenter", e => this.mouseHandler(e));
    carousel.addEventListener("mouseleave", e => this.mouseHandler(e));
    return carousel;
  }

  // 创建图片的二倍容器
  createImageCon() {

    this.imageCon = Utils.ce("div", {
      width: this.w * 2 + "rem",
      height: this.h + "rem",
      position: "absolute",
      left: 0,

    })
    //先把第一个图片添加在图片的容器内
    this.imageCon.appendChild(this.list[0]);
    //把整个容器添加在外容器中  详细看图解
    this.carousel.appendChild(this.imageCon);

  }
  //左右按钮
  createBn() {
    //设置左右按钮 和垂直居中
    this.bnlist.forEach((item, index) => {
      Object.assign(item.style, {
        position: "absolute",
        left: index === 0 ? "20px" : "none",
        right: index === 1 ? "20px" : "none",
        top: (this.h - item.height / 100) / 2 + "rem"
      });
      item.addEventListener("click", e => this.clickBnHandler(e));//绑定点击事件
      this.carousel.appendChild(item);//添加到外容器

    })

  }
  //点击左右按钮触发事件
  clickBnHandler(e) {
    //点击左边的时候进行++  超过图片数组的时候赋值0  反之。。。
    if (this.bnlist.indexOf(e.currentTarget) === 0) {
      this.pos--;
      if (this.pos < 0) this.pos = this.list.length - 1;
      this.direction = "right";
    } else {
      this.pos++;
      if (this.pos > this.list.length - 1) this.pos = 0;
      this.direction = "left";
    }
    this.createNextImage();//加载下一张图片

  }
  // 加载下一张图片
  createNextImage() {
    if (this.direction === "left") {
      this.imageCon.appendChild(this.list[this.pos]);//
      this.imageCon.style.left = "0rem";//移动
      this.x = 0;
    } else {
      this.imageCon.insertBefore(this.list[this.pos], this.imageCon.firstChild);
      this.imageCon.style.left = -this.w + "rem";
      this.x = -this.w;
    }
    this.bool = true;//自动轮播
    this.changePre();//切换小圆点的变化
  }
  //创建轮播图下的 小圆点
  createDot() {
    this.dot = Utils.ce("ul", {
      listStyle: "none",
      margin: "0px",
      padding: "0px",
      position: "absolute",
      bottom: "0.2rem"
    })
    //根据图片数组的个数创建小圆点的个数
    this.list.forEach((item, index) => {
      var li = Utils.ce("li", {
        width: "0.15rem",
        height: "0.15rem",
        backgroundColor: "rgba(255,0,0,0)",
        border: "1px solid #FF0000",
        borderRadius: "0.15rem",
        float: "left",
        marginLeft: index === 0 ? 0 : "0.1rem"
      }, this.dot);
      this.dotList.push(li);//全局储存创建的每个小圆点
    });
    this.carousel.appendChild(this.dot);//把UI追加到外容器
    this.dot.style.left = (this.w - Carousel.getRem(this.dot.offsetWidth)) / 2 + "rem";
    this.dot.addEventListener("click", e => this.clickDotHandler(e));//点击小圆点触发事件

  }
  //点击小圆点触发事件
  clickDotHandler(e) {

    if (e.target.constructor !== HTMLLIElement) return;
    var index = this.dotList.indexOf(e.target);

    if (index === this.pos) return;


    this.direction = index > this.pos ? "left" : "right";//
    this.pos = index;
    this.createNextImage();//加载下一张图片


  }


  //小圆点样式切换
  changePre() {
    if (this.pre) {
      this.pre.style.backgroundColor = "rgba(255,0,0,0)";
    }
    this.pre = this.dotList[this.pos];
    this.pre.style.backgroundColor = "rgba(255,0,0,0.6)";
  }


  //控制自动轮播   防抖鼠标离开200次之后开始自动轮播
  // 控制autoBool这个变量 
  mouseHandler(e) {
    if (e.type === "mouseenter") {

      this.autoBool = false;
      this.time = 200;

    } else {
      this.autoBool = true;
    }
  }
  //动画执行的函数
  update() {
    this.imgMove();
    this.autoPlay();
  }
  //静态方法
  static UPDATE() {
    for (var i = 0; i < Carousel.carouselList.length; i++) {
      Carousel.carouselList[i].update();
    }
  }
  //图片移动的动画
  //
  imgMove() {
    if (!this.bool) return;
    if (this.direction === "left") {
      this.x -= this.speed;
      if (this.x <= -this.w) {
        this.x = 0;
        this.bool = false;
        this.imageCon.firstElementChild.remove();
      }
      this.imageCon.style.left = this.x + "rem";
    } else {
      this.x += this.speed;
      if (this.x >= 0) {
        this.x = 0;
        this.bool = false;
        this.imageCon.lastElementChild.remove();
      }
      this.imageCon.style.left = this.x + "rem";
    }
  }
  //自动轮播的函数
  autoPlay() {
    if (!this.autoBool) return;
    this.time--;
    if (this.time > 0) return;
    this.time = 200;
    var evt = new MouseEvent("click");
    this.bnlist[1].dispatchEvent(evt);
  }


  //外部调用  设置轮播图的大小
  setWH(_w, _h) {
    //  如果没有添加到html就退出

    if (!this.parent) return;
    if (_w.constructor === Boolean) {
      // 第一个值为true 的时候获取 this.parent  添加的元素的位置  
      //轮播图这个容器  宽为这个添加容器的宽 高为3/1
      if (_w) {
        var rect = this.parent.getBoundingClientRect();
        this.w = Carousel.getRem(rect.width);//转换为 rem
        this.h = this.w / 3;
      }
    } else if (_w.constructor === Number) {
      //如果第一个参数是个数值型的就把参数转换成rem 存为全局变量
      this.w = Carousel.getRem(_w);
      this.h = Carousel.getRem(_h);

    }
  }
  //静态方法 转换rem
  static getRem(size) {
    //获取css中样式  fontSize:(100)在html设置增加灵活性   getComputedStyle   css获取样式仅可读
    var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
    //传入的实参除fontSize设置的值
    return size / fontSize;
  }



  //外部执行 把这个轮播添加到哪个元素
  appendTo(parent) {
    //如果参数是个字符串，就从htnl页面获取
    if (parent.constructor === String) parent = document.querySelector(parent);
    //吧容器添加到外部参数的元素
    parent.appendChild(this.carousel);
    this.parent = parent;//把参数 存为全局变量
  }



}

Utils.js工具类

1.预加载： list 数组 callback回调函数 basePath图片路径
方法：

 //预加载   list 数组   callback回调函数    basePath图片路径
    static reload(list,callback,basePath){
        if(!list || list.length===0) return;//数组没传值  跳出 不执行下面内容
        //list内容和路径拼接
        if(basePath){
            list=list.map(item=>basePath+item);
        }
        //创建图片
        var img=new Image();
        //给图片添加一个对象属性
        img.data={
            num:0,//用于累加
            resultList:[],//储存每次循环之后的复制的img
            list:list,//储存数组
            callback:callback//储存回调函数
        }
        img.addEventListener("load",Utils.loadHandlers);//加载事件
        img.src=list[0];//第一张图片的路径
    }
    //执行加载事件
    static loadHandlers(e){
        var data=e.currentTarget.data;//
        data.resultList.push(e.currentTarget.cloneNode(false));
        data.num++;
        if(data.num>data.list.length-1){
            e.currentTarget.removeEventListener("load",Utils.loadHandlers);
            //回调函数  返回的是图片的加载顺序
            data.callback(data.resultList);
            e.currentTarget.data=null;
            return;
        }
        e.currentTarget.src-data.list[data.num];
    }

用法：

constructor(list,basePath,w,h){
    // 设rem
    // 预加载
    // 预加载完成创建轮播图 
    this.w=w;
    this.h=h;
    this.elem=this.createCarousel();
    // console.log( Carousel.carouselList);
    
    
    Carousel.carouselList.push(this);
    Utils.reload(list,_list=>this.loadFinish(_list),basePath);
   
}

loadFinish(_list){
    this.list=_list;
    this.createImgCon(_list);
    this.createDot(_list);
    this.createBn();
    this.preChange();
}

2.添加css样式 的重构 三个参数分别是 标签 样式 属性
方法：

   static ce(type,style,props){
        let elem=document.createElement(type);
        //如果属性是一个对象  遍历
        if (style) {
            for (let prop in style) {
                elem.style[prop]=style[prop];
            }
        }
        if(props){
            for(let prop in props){
                elem[prop]=props[prop];
            }
        }
        return elem;
    }

用法：

let bn = Utils.ce("div", {
    //getRem()  方法是从前端获取fontzise的大小进行转换为  rem
    //设置左右按钮的  样式
    width: Carousel.getRem(30) + "rem",
    height: Carousel.getRem(60) + "rem",
    userSelect: "none",
    fontWeight: "bold",
    fontSize: Carousel.getRem(40) + "rem",
    lineHeight: Carousel.getRem(60) + "rem",
    textAlign: "center",
    position: "absolute",
    backgroundColor: "rgba(0,0,0,0.3)",
    top: (this.contentHeight - Carousel.getRem(60)) / 2 + "rem",
    //利用循环  当第一次进入循环 的时候 i=0这时候设置为左边   
    left: i === 0 ? Carousel.getRem(20) + "rem" : "none",
    // i=这时候设置为左边   
    right: i === 1 ? Carousel.getRem(20) + "rem" : "none",
    //左右按钮的  阴影样式
    boxShadow: i === 0 ? "2px 2px 2px #000" : "-2px 2px 2px #000",
}, {
    //同理根据循环的累加值i  添加标签属性   DOMtextContent 属性设置或返回指定节点的文本内容，以及它的所有后代。
    textContent: i === 0 ? "<" : ">"
});

0 - 0 - 知识点：

一 通过抛发事件触发点击事件

var  evt = new MouseEvent("click");

this.bnlist[1].dispatchEvent(evt);
自律自强的鱼
关注
专栏目录
轮播图（面向对象）
weixin_45261642的博客
08-09 857
轮播图，效果如下 一、js文件 1.Utils类 export default class Utils{ static ce(type,style,parent){ var elem=document.createElement(type); if(style){ for(var prop in style){ elem.style[prop]=style[prop]; } }
js实现无缝轮播图
weixin_45571121的博客
09-11 4236
一、轮播图需求 需要实现每隔一定时间进行下一张图片的自动轮播 需要点击左右按钮可以进行上下图片的切换 显示当前位置的小圆点 点击小圆点可以切换到对应的图片上 鼠标移入可视区时，停止轮播，显示左右按钮 下面我们来看一下效果图： 二、轮播图的原理 图片移动实现原理：利用浮动将所有所有照片依次排成一行，给这一长串图片ul添加一个父级的遮罩（就是可视区），每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 图片移动动画原理：从当前图片移动到下一张...
前端实战小案例--无缝轮播图实现
朽木自雕的博客
09-24 790
想练习更多前端案例，请进个人主页，点击前端实战案例->传送门 觉得不错的记得点个赞????支持一下我0.0！谢谢了！ 不积跬步无以至千里，不积小流无以成江海。 效果如下： 代码及注释如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无缝...
JavaScript轮播图（面向对象）
qq_45799465的博客
02-08 1703
步骤 轮播图1 HTML+CSS 轮播图2 动态生成页面 通过 JavaScript程序 生成 div标签中 所有 轮播图需要的标签 生成 ul ol div 标签节点 根据数组动态生成 原始 ul>li ol>li ul > li > img ol > li 第一个li添加 class,active 将生成的 ul>li ol>li 字符串 写入 ul ol 标签节点 将 ul ol div 标签节点 写入 轮播图div中 获取 原始 ul.
用面向对象的方法写个轮播图 不敢说很用心 但是值得一看!
weixin_55973231的博客
03-16 261
轮播图 ...
原生js实现无缝轮播（包括面向对象的写法）
12-13
在网页设计中，轮播图是一种常见的展示方式，用于在有限的空间内展示多张图片或内容。本教程将深入探讨如何使用原生JavaScript实现一个无缝轮播效果，同时结合面向对象编程思想进行代码组织，提高代码复用性和可维护...
轮播图的五种写法（原生、vue2、vue3、react类组件，react函数组件）
最新发布
温暖前端的博客
02-10 2193
轮播图效果是一种在网页或应用程序中展示多张图片或内容的方式，通常以水平或垂直的方式循环播放。本文使用原生、vue2、vue3、react类组件，react函数组件五种写法实现了简单的轮播图效果，需要更多轮播效果需要再增加样式或者动画。淡入淡出效果：每张图片渐渐淡入显示，然后渐渐淡出消失，过渡效果平滑。（使用CSS的@keyframes和animation属性）创建一个@keyframes，定义两个关键帧，一个是初始状态，一个是结束状态，其中透明度从0到1，将该动画应用到需要淡入淡出的元素上，使用。
用better-scroll做轮播图,不能无缝循环
光
01-20 4134
现象: 可以轮播,但不能循环(不能从第一张往前翻,不能从最后一张往后翻)按教程里给slider-group增加了2个slider的宽度,但他们出现在轮播图片的末尾(2个空白)第一张图没有对应dot,第二张图对应第一个dot,以此类推 后经网友分享,发现0.1.15中可以正常运行,原来是better-scoll版本的问题,在新版本中,轮播图的bs对象需要这么配置(snap写在一个对象中):
vue --- > mintUI中Swipe(轮播图)的使用
栗子好好吃的博客
09-16 4109
引入 // main.js // 导入包 import { Swipe, SwipeItem } from 'mint-ui' // 注册 Vue.component(Swipe.name, Swipe); Vue.component(SwipeItem.name, SwipeItem); 放在需要显示的位置 // HomeContainer.vue(首页 -> 组件) <temp...
android轮播图实现方案,Android轮播图实现教程
weixin_42567279的博客
05-26 3253
ListView的headerView设置为轮播图之后结合上/下拉刷新/加载的模式成为现在大多数APP的一个必须具备的功能，对于许多初学者来说想要实现轮播图这样一个集线程睡眠、自动处理、替换过程中刷新UI界面的组合功能非常困难，没有思路，感觉无从下手，去搜索各种实现方案，发现目前充斥着大量的类似于使用弃用组件Gallery这样的例子。本篇博客将通过分析轮播图的各个注意事项及实现思路来实现一个简易的...
JavaScript基于面向对象实现的无缝滚动轮播示例
10-15
主要介绍了JavaScript基于面向对象实现的无缝滚动轮播,结合实例形式分析了JavaScript面向对象实现的无缝滚动轮播相关对象定义、初始化及功能实现技巧,需要的朋友可以参考下
0原生js-面向对象-无缝轮播图.zip
09-29
使用原生javascript + 使用面向对象思想，编写无缝轮播图特效。
viewpager轮播图的adapter
cmwly的博客
03-16 458
package com.daniujuntuan.android.adapter;import android.content.Context; import android.content.DialogInterface; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.vi
原生js实现图片轮播组件开发
蒲公英芽的博客
02-02 783
轮播图 功能需求： 默认每间隔3s，图片自动轮播一次； 点击左右按钮，实现图片的无缝轮播； 点击下方小圆点，实现图片的无缝轮播； 可以自定义各轮播图尺寸； 当缩放浏览器窗口时，轮播图尺寸随之改变； 看一下效果： 分析： 为了有更好的效果，将图片预加载完成后，再进行图片轮播； 因为使用插入css样式来写，Carousel.styles 只执行一次，不能实现多个不同尺寸的轮播图，所以轮播图的宽...
四种方式实现轮播图
热门推荐
wulixiaoxiao1的博客
02-26 2万+
转载自：http://www.jianshu.com/p/bd1f34e7e953 不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。 轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~ 为了方便大家观看，我把css，
JavaScript中使用面对对象实现无缝轮播图
mikkfe的博客
03-03 384
使用js实现简易的无缝轮播图，利用面向对象的功能，对轮播图进行功能拆分： 1.选择元素（属性） 2.完善布局（方法） 3.绑定事件（方法） 4.改变索引（方法） 5.设置imgbox的位置(方法) 首先需要对其进行一个布局 <body> <div id="box"> <div class="imgbox"> <a>&lt...
面向对象无缝滚动轮播(附带面向过程代码)
bangai2527的博客
12-13 147
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>banner</title> <link rel="stylesheet" href="CSS/main1.css"> </head> <bod...
面向对象无缝轮播图
Alone patients的博客
09-04 276
面向对象无缝最基础样式轮播图 （如果有简单的方法大家可以私聊我讨论下） css body,ul,li{ margin: 0; padding: 0; } img{ display: block; } li{ list-style: none; } #box{ position: relative; width: 900px; height: 300px; overflow: hid...
两种简单方法实现输入ASC码转字符
7. 交叉语言比较：文件标题中提到的“两种傻瓜写法”，可能指的是两种不同编程语言之间的对比，比如一种方法适用于较为底层的语言，另一种则更适合高级语言的用户。 8. 应用场景：此外，文档可能还提到这类转换在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值