import Carousel from './js/Carousel.js';
? var itemList1 = [{
? ? ? ? ? ? ? ? day: 26,
? ? ? ? ? ? ? ? date: "/Oct.2020",
? ? ? ? ? ? ? ? title: "秘境之藍 無阿里不西藏 自駕阿里小北線",
? ? ? ? ? ? ? ? src: "./carousel_img/a.jpg",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? day: 25,
? ? ? ? ? ? ? ? date: "/Oct.2020",
? ? ? ? ? ? ? ? title: "這是一個什么樣的國家？",
? ? ? ? ? ? ? ? src: "./carousel_img/b.jpg",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? day: 24,
? ? ? ? ? ? ? ? date: "/Oct.2020",
? ? ? ? ? ? ? ? title: "在徽州，給秋天寫了8封信",
? ? ? ? ? ? ? ? src: "./carousel_img/c.jpg",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? day: 23,
? ? ? ? ? ? ? ? date: "/Oct.2020",
? ? ? ? ? ? ? ? title: "「穿過狂野的風」趕赴內蒙的追羊計劃",
? ? ? ? ? ? ? ? src: "./carousel_img/d.jpg",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? day: 22,
? ? ? ? ? ? ? ? date: "/Oct.2020",
? ? ? ? ? ? ? ? title: "愛讓我們無所不能｜南極大冒險",
? ? ? ? ? ? ? ? src: "./carousel_img/e.jpg",
? ? ? ? ? ? },
? ? ? ? ];
? ? ? ? let carousel1 = new Carousel(itemList1);
? ? ? ? carousel1.appendTo(".div1");
? ? ? ? animation();
? ? ? ? function animation(){
? ? ? ? ? ? requestAnimationFrame(animation);
? ? ? ? ? ? carousel1.update();
? ? ? ? ? ? // carousel2.update();
}

import Component from './Component.js';
?
export default class Carousel extends Component{
? ??
? ? imgList;
? ? bnList;
? ? imgCon;
? ? dot;
? ? dotList=[];
? ? data;
? ? direction;
? ? pos=0;
? ? x=0;
? ? speedX=1;
? ? bool=false;
? ? time=200;
? ? autoBool=true;
?
? ? // WIDTH=13.66;
? ? // HEIGHT=4.55;
? ? WIDTH;
? ? HEIGHT;
? ??
? ? constructor(_data,_width,_height){
? ? ? ? super("div");
? ? ? ? this.data=_data;
? ? ? ? this.width = _width;
? ? ? ? this.height = _height;
? ? ? ? this.elem.className = "carousel";
? ? ? ? // Object.assign(this.elem.style,{
? ? ? ? // ? ? width:this.WIDTH+"rem",
? ? ? ? // ? ? height:this.HEIGHT+"rem",
? ? ? ? // ? ? position:"relative",
? ? ? ? // ? ? overflow:"hidden",
? ? ? ? // });
? ? ? ? let arr = ["./carousel_img/left.png","./carousel_img/right.png"];
? ? ? ? let _imgList = this.data.reduce((value,item)=>{
? ? ? ? ? ? if(item.src) value.push(item.src);
? ? ? ? ? ? return value
? ? ? ? },arr);
? ? ? ? this.loadImg(_imgList,this.createCarousel);
? ? ? ? // window.addEventListener("resize",e=>this.resizeHandler(e));
? ? }
?
? ? createCarousel(imgList){
?
? ? ? ? Object.assign(this.elem.style,{
? ? ? ? ? ? width:this.WIDTH+"rem",
? ? ? ? ? ? height:this.HEIGHT+"rem",
? ? ? ? ? ? position:"relative",
? ? ? ? ? ? overflow:"hidden",
? ? ? ? });
?
? ? ? ? this.imgList = imgList;
? ? ? ? this.bnList = this.imgList.splice(0,2);
?
? ? ? ? imgList.forEach(item=>{
? ? ? ? ? ? Object.assign(item.style,{
? ? ? ? ? ? ? ? width:this.WIDTH+"rem",
? ? ? ? ? ? ? ? height:this.HEIGHT+"rem",
? ? ? ? ? ? })
? ? ? ? })
?
? ? ? ? this.createimgCon();
? ? ? ? this.createDotList();
? ? ? ? this.createBn();
? ? ? ? // 動畫一般在外面做，類里面只需要寫狀態(tài)更新即可。
? ? ? ? // this.animation();
?
? ? ? ? // 鼠標停留在輪播圖上時不進行自動輪播。
? ? ? ? this.elem.addEventListener("mouseenter",e=>this.mouseHandler(e));
? ? ? ? this.elem.addEventListener("mouseleave",e=>this.mouseHandler(e));
? ? }
? ? createimgCon(){
? ? ? ? this.imgCon = document.createElement("div");
? ? ? ? Object.assign(this.imgCon.style,{
? ? ? ? ? ? width:this.WIDTH*2+"rem",
? ? ? ? ? ? height:this.HEIGHT+"rem",
? ? ? ? ? ? position:"absolute",
? ? ? ? });
? ? ? ? let item = this.createItem(this.imgList[0],this.data[0]);
? ? ? ? this.imgCon.appendChild(item);
? ? ? ? this.elem.appendChild(this.imgCon);
? ? }
? ? createItem(img,obj){ ? ?
? ? ? ? let item = document.createElement("div");
? ? ? ? Object.assign(item.style,{
? ? ? ? ? ? width:this.WIDTH+"rem",
? ? ? ? ? ? height:this.HEIGHT+"rem",
? ? ? ? ? ? position:"relative",
? ? ? ? ? ? float:"left",
? ? ? ? });
? ? ? ? let title = document.createElement("div");
? ? ? ? Object.assign(title.style,{
? ? ? ? ? ? position:"absolute",
? ? ? ? ? ? left:"15%",
? ? ? ? ? ? top:"0.3rem",
? ? ? ? ? ? fontSize:"0.3rem",
? ? ? ? ? ? color:"#ffffff",
? ? ? ? ? ? textShadow:"0.02rem 0.02rem 0.02rem #000000",
? ? ? ? ? ? width:"8rem",
? ? ? ? ? ? lineHeight:"0.5rem",
? ? ? ? })
? ? ? ? let head1=document.createElement("div");
? ? ? ? Object.assign(head1.style,{
? ? ? ? ? ? height:"0.5rem",
? ? ? ? })
? ? ? ? head1.textContent = obj.date;
? ? ? ? let span = document.createElement("span");
? ? ? ? Object.assign(span.style,{
? ? ? ? ? ? fontSize:"0.4rem",
? ? ? ? });
? ? ? ? span.textContent = obj.day;
? ? ? ? let head2 = document.createElement("div");
? ? ? ? Object.assign(head2.style,{
? ? ? ? ? ? height:"0.5rem",
? ? ? ? })
? ? ? ? head2.textContent = obj.title;
? ? ? ? head1.insertBefore(span,head1.firstChild);
? ? ? ? title.appendChild(head1);
? ? ? ? title.appendChild(head2);
? ? ? ? item.appendChild(title);
? ? ? ? item.appendChild(img);
?
? ? ? ? return item;
? ? }
? ? createDotList(){
? ? ? ? this.dot = document.createElement("ul");
? ? ? ? Object.assign(this.dot.style,{
? ? ? ? ? ? listStyle:"none",
? ? ? ? ? ? margin:0,
? ? ? ? ? ? padding:0,
? ? ? ? ? ? position:"absolute",
? ? ? ? ? ? left:(this.WIDTH-1.8)/2+"rem",
? ? ? ? ? ? bottom:"0.3rem", ? ? ? ? ? ?
? ? ? ? })
? ? ? ? for(let i=0;i<this.imgList.length;i++){
? ? ? ? ? ? let li = document.createElement("li");
? ? ? ? ? ? Object.assign(li.style,{
? ? ? ? ? ? ? ? width:"0.18rem",
? ? ? ? ? ? ? ? height:"0.18rem",
? ? ? ? ? ? ? ? borderRadius:"0.2rem",
? ? ? ? ? ? ? ? marginLeft:i===0?"0px":"0.2rem",
? ? ? ? ? ? ? ? border:"0.02rem solid red",
? ? ? ? ? ? ? ? float:"left",
? ? ? ? ? ? })
? ? ? ? ? ? this.dot.appendChild(li);
? ? ? ? ? ? this.dotList.push(li);
? ? ? ? }
? ? ? ? this.dot.addEventListener("click",e=>this.dotClickHandler(e));
? ? ? ? this.elem.appendChild(this.dot);
? ? }
? ? createBn(){
? ? ? ? for(let i=0;i<this.bnList.length;i++){
? ? ? ? ? ? Object.assign(this.bnList[i].style,{
? ? ? ? ? ? ? ? position:"absolute",
? ? ? ? ? ? ? ? top:(this.HEIGHT*100-this.bnList[i].height)/2/100+"rem",
? ? ? ? ? ? })
? ? ? ? ? ? if(i===0){
? ? ? ? ? ? ? ? this.bnList[i].style.left = "0.5rem";
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? this.bnList[i].style.right = "0.5rem";
? ? ? ? ? ? }
? ? ? ? ? ? this.bnList[i].addEventListener("click",e=>this.bnClickHandler(e));
? ? ? ? ? ? this.elem.appendChild(this.bnList[i]);
? ? ? ? }
? ? }
? ? bnClickHandler(e){
? ? ? ? if(this.bool) return
? ? ? ? if(e.target===this.bnList[0]){
? ? ? ? ? ? this.direction="left";
? ? ? ? ? ? this.pos++;
? ? ? ? ? ? if(this.pos>this.imgList.length-1) this.pos = 0;
? ? ? ? }else{
? ? ? ? ? ? this.direction="right";
? ? ? ? ? ? this.pos--;
? ? ? ? ? ? if(this.pos<0) this.pos=this.imgList.length-1;
? ? ? ? }
? ? ? ? this.bool=true;
? ? ? ? this.createNextItem();
? ? }
? ? dotClickHandler(e){
? ? ? ? if(e.target.constructor!==HTMLLIElement) return ? ?//這里因為是對父元素進行偵聽，因此要先判斷點擊的是不是li，如果點擊的不是小圓點就不能改變開關，直接return。不能先改變開關。
? ? ? ? if(this.bool)return
? ? ? ? for(let i=0;i<this.dotList.length;i++){
? ? ? ? ? ? if(e.target===this.dotList[i]){
? ? ? ? ? ? ? ? if(this.pos===i) return
? ? ? ? ? ? ? ? this.direction=i<this.pos?"right":"left";
? ? ? ? ? ? ? ? this.pos=i;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? this.bool=true;
? ? ? ? this.createNextItem();
? ? }
? ? createNextItem(){
? ? ? ? let nextItem=this.createItem(this.imgList[this.pos],this.data[this.pos]);
? ? ? ? if(this.direction==="left"){
? ? ? ? ? ? this.imgCon.appendChild(nextItem);
? ? ? ? ? ? this.x=0;
? ? ? ? }else{
? ? ? ? ? ? this.imgCon.insertBefore(nextItem,this.imgCon.firstChild);
? ? ? ? ? ? this.x=-this.WIDTH;
? ? ? ? }
? ? ? ? this.imgCon.style.left=this.x+"rem";
? ? }
? ? update(){
? ? ? ? this.imgMove();
? ? ? ? this.autoPlay();
? ? }
? ? // 這里只需要做一個狀態(tài)更新即可。
? ? // 動畫在外面做。
? ? // animation(){
? ? // ? ? requestAnimationFrame(this.animation);
? ? // ? ? if(!this.bool) return
? ? // ? ? this.imgMove();
? ? // }
? ? imgMove(){
? ? ? ? if(!this.bool) return
? ? ? ? if(this.direction==="left"){
? ? ? ? ? ? this.x-=this.speedX;
? ? ? ? ? ? if(this.x<-this.WIDTH){
? ? ? ? ? ? ? ? this.imgCon.firstElementChild.remove();
? ? ? ? ? ? ? ? this.x=0;
? ? ? ? ? ? ? ? this.bool=false;
? ? ? ? ? ? }
? ? ? ? }else{
? ? ? ? ? ? this.x+=this.speedX;
? ? ? ? ? ? if(this.x>0){
? ? ? ? ? ? ? ? this.imgCon.lastElementChild.remove();
? ? ? ? ? ? ? ? this.x=0;
? ? ? ? ? ? ? ? this.bool=false;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? this.imgCon.style.left=this.x+"rem";
? ? }
? ? autoPlay(){
? ? ? ? if(!this.autoBool) return
? ? ? ? this.time--; ? ?//增加防抖
? ? ? ? if(this.time===0){ ??
? ? ? ? ? ? let evt = new Event("click");
? ? ? ? ? ? this.bnList[0].dispatchEvent(evt);
? ? ? ? ? ? this.time=200;
? ? ? ? }
? ? }
? ? resizeHandler(e){
? ? ? ? document.documentElement.style.fontSize=document.documentElement.clientWidth/(this.WIDTH*100)*100+"px";
? ? }
? ? appendTo(parent){
? ? ? ? if(typeof parent==="string") parent = document.querySelector(parent);
? ? ? ? parent.appendChild(this.elem);
? ? ? ? if(!isNaN(this.WIDTH) && !isNaN(this.HEIGHT)) return
? ? ? ? if(parent===document.body){
? ? ? ? ? ? this.WIDTH = 13.66;
? ? ? ? ? ? this.HEIGHT = 4.55;
? ? ? ? }else{
? ? ? ? ? ? let rect = parent.getBoundingClientRect();
? ? ? ? ? ? this.WIDTH=rect.width/100;
? ? ? ? ? ? this.HEIGHT=rect.height/100;
? ? ? ? }
? ? }
? ? mouseHandler(e){
? ? ? ? if(e.type==="mouseenter"){
? ? ? ? ? ? this.autoBool=false;
? ? ? ? }else{
? ? ? ? ? ? this.autoBool=true;
? ? ? ? }
? ? }
?
? ? // 圖片預加載
? ? loadImg(_imgList,_callBack){
? ? ? ? let img = new Image();
? ? ? ? img.i=0;
? ? ? ? img.arr=[];
? ? ? ? img.imgList=_imgList;
? ? ? ? // img.callBack=_callBack;
? ? ? ? img.src=_imgList[img.i];
? ? ? ? img.addEventListener("load",e=>this.imgLoadFinishHandler(e));
? ? }
? ? imgLoadFinishHandler(e){
? ? ? ? // console.log(e.currentTarget);
? ? ? ? e.currentTarget.arr.push(e.currentTarget.cloneNode());
? ? ? ? e.currentTarget.i++;
? ? ? ? if(e.currentTarget.i<e.currentTarget.imgList.length){
? ? ? ? ? ? e.currentTarget.src = e.currentTarget.imgList[e.currentTarget.i];
? ? ? ? }else{
? ? ? ? ? ? // e.currentTarget.callBack(e.currentTarget.arr);
? ? ? ? ? ? this.createCarousel(e.currentTarget.arr);
? ? ? ? }
? ? }
}