0713 NOTE
面向对象的轮播图
/*css样式*/ .divs{
width: 900px; height: 300px; position: relative; } <!--html样式--> <button>切换</button> <button id = "back">返回</button> <div class="divs" ></div> <script> import Carousel from "./js/Carousel.js"; var arr = [ {
date: "12/Jul.2021", title: "No Fear in My Heart. 10天4700公里，自由散漫南疆奇遇记。", img: "./img1/a.jpeg" }, {
date: "11/Jul.2021", title: "128个公园！284辆过山车！我的全球公园打卡计划不断更新ing", img: "./img1/b.jpg" }, {
date: "10/Jul.2021", title: "疫情下带父母旅行的第四年Flag小旗飘在广州~谢谢你陪我，勇敢坚定地走自己的路", img: "./img1/c.jpg" }, {
date: "09/Jul.2021", title: "读闽夏|日子，就像夏天长", img "./img1/d.jpg" }, {
date: "08/Jul.2021", title: "30天自驾16座城市，从南到北，一万公里重新认识你。（海南-内蒙古-海南）", img: "./img1/e.jpg" },]; var arr1 = [ {
date: "12/Jul.2020", title: "No Fear in My Heart. 10天4700公里，自由散漫南疆奇遇记。", img: "./img1/a1.jpeg" }, {
date: "11/Jul.2020", title: "128座乐园！284座过山车！我的全球乐园打卡计划持续更新ing", img: "./img1/b1.jpeg" }, {
date: "10/Jul.2020", title: "带着父母旅行的第四年，疫情下的Flag小旗在广州飘～谢谢你们陪着我，会勇敢坚定的走自己的路", img: "./img1/c1.jpeg" }, {
date: "09/Jul.2020", title: "念念闽夏｜日子娓娓，一如夏季绵长", img: "./img1/d1.jpeg" }, {
date: "08/Jul.2020", title: "30天自驾16座城市，从南到北，一万公里重新认识你。（海南-内蒙古-海南）", img: "./img1/e1.jpeg" }, ] var carousel = new Carousel(null,false); carousel.setSource(arr.slice(0)); carousel.appendTo(".divs"); document.querySelector("button").addEventListener("click",clickhandler); document.querySelector("#back").addEventListener("click",clickhandler1); function clickhandler(e){
carousel.setSource(arr1); } function clickhandler1(e){
carousel.setSource(arr); } animation(); function animation() {
requestAnimationFrame(animation); Carousel.update(); } </script> import Component from "./Component.js"; import Utils from "./Utils.js"; export default class Carousel extends Component { arr = []; bnList = []; imgList = []; autoBool = false; moveBool = false; prev; pos = 0; x = 0; direc = "left"; time = 300; speedX = 50; imgCon; ul; full; rect={ width:0,height:0}; static carouselList = new Set(); constructor(source,full=true) { super(); this.full=full; Carousel.setCss(); this.bnList = [this.createBnList(true), this.createBnList(false)]; this.setSource(source); } setSource(source) { if (!source || source.length === 0) return; for (var i = 0; i < this.arr.length; i++) { this.arr[i] = null; } this.arr=null; this.arr = source.slice(0); Utils.loadImage(source.map(item => item.img), list => this.loadHandler(list)); // console.log(source); } loadHandler(list) { for(var i=0;i<this.imgList.length;i++){ this.imgList[i].remove(); this.imgList[i]=null; } this.imgList=null; this.pos=0; this.time=300; this.autoBool=false; this.moveBool=false; this.prev=null; this.x=0; this.direc="left"; this.imgList = list.map((item, index) => this.createImgList(item, index)); this.createCarousel(); } appendTo(parent) { super.appendTo(parent); this.rect=this.parent.getBoundingClientRect(); Carousel.carouselList.add(this); } remove() { super.remove(); Carousel.carouselList.delete(this); } createBnList(leftBool) { var canvas = document.createElement("canvas"); canvas.width = 40; canvas.height = 100; var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FFF"; ctx.beginPath(); ctx.moveTo(30, 12); ctx.lineTo(6, 50); ctx.lineTo(30, 86); ctx.lineTo(33, 77); ctx.lineTo(15, 50); ctx.lineTo(30, 23); ctx.closePath(); ctx.fill(); Object.assign(canvas.style, { position: "absolute", backgroundColor: "#CCC", transform: leftBool ? "scale(0.7,0.7)" : "scale(-0.7,0.7)", boxShadow: leftBool ? "3px 3px 3px #999" : "-3px -3px 3px #999" }) return canvas; } createImgList(item, index) { var elem = document.createElement("div"); elem.className = "imgList"; var d = this.arr[index].date.split(/(?<=\/)/); elem.innerHTML = ` <h3><span>${ d[0]}/</span>${ d[1]}</h3> <p>${ this.arr[index].title}</p> `; item.className = "bgimage" if(!this.full){ //改变父容器大小时，将图片根据父容器大小进行调整，不会因为容器大小调整导致样式出错 // console.log(item); // console.log(elem); Object.assign(item.style,{ width:this.rect.width+"px", height:this.rect.height+"px" }) Object.assign(elem.style,{ //改变父容器大小时，防止图片切换时产生空白 width:this.rect.width+"px", height:this.rect.height+"px" }) } elem.insertBefore(item, elem.firstElementChild); return elem; } createCarousel() { this.elem.className = "carousel"; if(!this.full){ Object.assign(this.elem.style,{ width:this.rect.width+"px", height:this.rect.height+"px" }) } this.imgCon = document.createElement("div"); this.imgCon.className = "imgCon"; this.imgCon.appendChild(this.imgList[0]); this.elem.appendChild(this.imgCon); if(!this.full){ Object.assign(this.imgCon.style,{ width:this.rect.width*2+"px", height:this.rect.height+"px" }) } this.ul = document.createElement("ul"); this.ul.innerHTML = this.arr.reduce((value, item) => { return value + "<li></li>"; }, ""); this.ul.addEventListener("click", e => this.clickHandler(e)); this.elem.appendChild(this.ul); this.bnList.forEach((item, i) => { item.className = i === 0 ? "left" : "right"; this.elem.appendChild(item); item.style.top=(this.elem.offsetHeight-item.offsetHeight)/2+"px" item.addEventListener("click", e => this.bnClickHandler(e)); }) this.elem.addEventListener("mouseenter", e => this.mouseHandler(e)) this.elem.addEventListener("mouseleave", e => this.mouseHandler(e)) this.changePrev() } clickHandler(e) { if (this.moveBool) return; if (e.target.nodeName !== "LI") return; var index = Array.from(this.ul.children).indexOf(e.target); if (index === this.pos) return; if (index > this.pos) this.direc = "left"; else this.direc = "right"; this.pos = index; this.createNextImg() } bnClickHandler(e) { console.log(e.target); // console.log(e.currentTarget); // console.log(this.bnList.indexOf(e.target)); // console.log(this.bnList); if (this.moveBool) return; if (this.bnList.indexOf(e.target) === 0) { this.direc = "right"; this.pos--; if (this.pos < 0) this.pos = this.arr.length - 1; } else { this.direc = "left"; this.pos++; if (this.pos > this.arr.length - 1) this.pos = 0; } this.createNextImg() } createNextImg() { if (this.direc === "left") { this.imgCon.appendChild(this.imgList[this.pos]); this.x = 0; } else { this.imgCon.insertBefore(this.imgList[this.pos], this.imgCon.firstElementChild); this.x = -this.elem.offsetWidth } this.imgCon.style.left = this.x + "px"; this.moveBool = true; this.changePrev(); } mouseHandler(e) { if (e.type === "mouseenter") { this.autoBool = false; this.time = 300; } else { this.autoBool = true; } } changePrev() { if (this.prev) { this.prev.style.backgroundColor = "rgba(0,0,0,0)"; } this.prev = this.ul.children[this.pos]; this.prev.style.backgroundColor = "red"; } update() { this.imgConMove(); this.autoPlay(); } imgConMove() {搜索
最近热搜
历史搜索 清除历史记录