原生JS中ES6面向对象模块化开发之轮播图（详细）

最新推荐文章于 2022-04-29 14:45:35 发布

置顶

超cccccccc

最新推荐文章于 2022-04-29 14:45:35 发布

阅读量421

点赞数

文章标签： javascript es6/es7

本文链接：https://blog.csdn.net/weixin_48873376/article/details/108037775

版权

本文深入探讨了如何使用原生JavaScript结合ES6特性进行面向对象的模块化开发，以实现一个详细的轮播图功能。内容涵盖了HTML布局、核心JS代码、图片加载处理以及辅助的元素创建方法。

摘要由CSDN通过智能技术生成

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);
        var arr=["./img/a.png","./img/b.png","./img/c.png","./img/d.png","./img/e.png","./img/left.png","./img/right.png"];
        var arr1=["./img/a.jpeg","./img/b.jpeg","./img/c.jpeg","./img/d.jpeg","./img/e.jpeg","./img/left.png","./img/right.png"];
        let carousle = new Carousel(arr);
        carousle.appendTo('body');
        carousle.setWH(true)
        let carousel1=new Carousel(arr1);
           carousel1.appendTo("body");
           carousel1.setWH(600,200);

        animation()
        function animation(){
    
            requestAnimationFrame(animation);
            Carousel.UPDATE()
        }
        function resizeHandler(e){
    
            document.documentElement.style.fontSize = document.documentElement.clientWidth*(100/screen.width)+"px";
        }
    </script>
</body>
</html>

js中的代码块
轮播图的JS主代码

import Utils from './Utils.js';
import loadImage from './loadImage.js'
export default class Carousel{
   
    imgList;//传进来的图片数组列表
    Carousel;//轮播图的可视容器
    parent//需要添加到的外层元素
    w;h;//轮播图可视的宽高
    bnlist;//左右箭头图片的数组列表
    list;//轮播图的图片列表
    imgCon;//存放图片的容器
    dot;dotList = [];//小圆点列表；存放每个小圆点的数组
    pos = 0;direction = '';//当前图片索引；当前imgCon移动方向
    x;speed = 0.5;//当前imCon相对父容器移动的距离；每次移动的距离
    bool=false;autoBool = false;time = 200;//图片切换时的条件，自动播放的条件，防抖的次数。
    static carousellist = [];//静态的一个属性，目的是为了存放一个页面中不同的Carousel对象。
    constructor(_imgList){
   
        this.imgList = _imgList;//设置当前的imgList等于传进来_imgList（    存放所有图片的数组）；
        this.Carousel = this.creatCarousel();//创建轮播图可视区域宽高
        new loadImage(_imgList,list=>this.finishHandler(list));//创建一个LoadImage对象，目的是为了将所有图片加载进去，使用回调函数处理加载进来的图片。回调函数为当前对象中的finishHandler。
        Carousel.carousellist.push(this)//将当前创建好的carousel对象放到carousellist这个数组里，目的是当页面中有多个carousel对象时，可以方便进行遍历处理。
    }
    appendTo(parent){
   //该方法是方便将carousel放进任何元素中，参数为要放入的父容器。
       if(typeof parent === 'string') parent = document.querySelector(parent);//如果参数是字符串的话，就直接从页面中获取。
       parent.appendChild(this.Carousel);//将当前的carousel放入到获取的父元素中。
       this.parent = parent;//当前的parent属性值就等于传进来的parent
    }
    finishHandler(_list){
   //该方法是loadImage的回调函数，当所有图片加载完成时，该方法才有效。参数为所有加载好的图片数组列表。
        this.bnlist = _list

最低0.47元/天解锁文章

超cccccccc

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生JS中ES6面向对象模块化开发之轮播图（详细）

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
复制链接

扫一扫