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