<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
JS實現輪播圖案例
2022-04-02 10:00:24
本文範例為大家分享了JS實現輪播圖案例的具體程式碼，供大家參考，具體內容如下
實現功能：
1、自動輪播：滑鼠停留在輪播圖上時不切換圖片，滑鼠離開後自動輪播。
2、點選左右按鈕切換圖片。
3、點選下方按鈕切換到對應的圖片。
4、輪播圖大小自適應：
可以放入到執行的父容器中展示。
不指定父容器時，預設放入body標籤。佔滿一屏的寬度，當改變瀏覽器視窗大小時，輪播圖大小成比例改變。
可以指定輪播圖的寬高。
實現方式：用物件導向的方式實現，使用時傳入圖片和圖片對應的資料，再建立範例。
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();
// 動畫一般在外面做，類裡面只需要寫狀態更新即可。
// 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();
}
// 這裡只需要做一個狀態更新即可。
// 動畫在外面做。
// 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);
}
}
}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45