　用js實現(xiàn)點擊切換和自動播放的輪播圖示例

3403771864 發(fā)布于2022-10-24 21:47 / 769人閱讀

　　js實現(xiàn)點擊切換和自動播放的輪播圖，其實十分簡單，話不多說，我們直接看示例：

　　輪播圖案例

　　&lt;!DOCTYPE html&gt;
　　&lt;html&gt;
　　&lt;head&gt;
　　&lt;meta charset="UTF-8"&gt;
　　&lt;meta name="viewport"content="width=device-width,initial-scale=1.0"&gt;
　　&lt;title&gt;Document&lt;/title&gt;
　　&lt;/head&gt;
　　&lt;body&gt;
　　&lt;script&gt;
　　//1、布局
　　//2、定義當(dāng)前第幾張圖片和應(yīng)該向什么方向運動
　　//3、將需要放置的圖片根據(jù)方向放在前面或者后面
　　//4、將整個容器向左或者向右移動
　　//5、完成后將上一次的圖片刪除
　　//imgCon放置所有圖片的容器
　　//dotList放置小圓點列表
　　//bnList放置左右按鈕的數(shù)組
　　//imgList放置所有圖片的數(shù)組
　　//pos確認(rèn)當(dāng)前圖片是第幾張
　　//direction圖片運行的方向
　　//imgSrcList圖片地址數(shù)組
　　var imgCon,ul,preDot;
　　var pos=0,
　　x=0,
　　bool=false;
　　dotList=[],
　　imgList=[],
　　bnList=[],
　　time=300,
　　imgSrcList=["./img/a.png","./img/b.png","./img/c.png","./img/d.png","./img/e.png"]
　　direction=""
　　autoBool=false;
　　const WIDTH=1500;
　　const HEIGHT=500;
　　const LEFT=Symbol();
　　const RIGHT=Symbol();
　　const SPEED=40;
　　init();
　　/*
　　init()初始化函數(shù)
　　1、創(chuàng)建輪播圖外層容器
　　2、創(chuàng)建輪播圖圖片容器
　　3、創(chuàng)建按鈕列表
　　4、創(chuàng)建小圓點列表
　　5、將輪播圖容器放在body中
　　6、切換小圓點，因為當(dāng)前是第0張，所以讓第一個小圓點背景為紅色
　　7、將小圓點容器設(shè)置水平居中
　　8、設(shè)置時間間隔，每16毫秒執(zhí)行animation函數(shù)一次，因為一秒是1000毫秒
　　一秒中執(zhí)行60次，就是60幀頻，每次花費的時間是16.6666毫秒
　　9、給最外層的輪播圖增加事件偵聽，一個是鼠標(biāo)進入，一個是鼠標(biāo)離開
　　*/
　　function init(){
　　var carousel=ce("div",{
　　width:WIDTH+"px",
　　height:HEIGHT+"px",
　　position:"relative",
　　margin:"auto",
　　overflow:"hidden"
　　});
　　createImgCon(carousel);
　　createButton(carousel);
　　createDotList(carousel);
　　document.body.appendChild(carousel);
　　changeDot();
　　ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
　　setInterval(animation,16);
　　carousel.addEventListener("mouseenter",mouseHandler);
　　carousel.addEventListener("mouseleave",mouseHandler);
　　}
　　/*
　　輪播圖進入和離開的事件函數(shù)
　　1、如果進入輪播圖，設(shè)置自動輪播的開關(guān)是false，不會自動輪播
　　并且重新將計時設(shè)置為300
　　2、如果離開輪播圖，設(shè)置自動輪播開關(guān)是true，就會自動輪播了
　　*/
　　function mouseHandler(e){
　　if(e.type==="mouseenter"){
　　autoBool=false;
　　time=300;
　　}else if(e.type==="mouseleave"){
　　autoBool=true;
　　}
　　}
　　/*
　　創(chuàng)建元素
　　參數(shù)：
　　type創(chuàng)建元素的類型，字符串
　　style創(chuàng)建元素的樣式，對象，使用對象方式給出該容器的樣式
　　1、根據(jù)類型創(chuàng)建元素
　　2、將給入的樣式設(shè)置給元素的行內(nèi)樣式
　　3、返回創(chuàng)建好的元素
　　*/
　　function ce(type,style){
　　var elem=document.createElement(type);
　　//ES6的方法，將后面的對象中的屬性復(fù)制到前面對象中
　　Object.assign(elem.style,style);//等同于下面寫法
　　/*for(var prop in style){
　　elem.style[prop]=style[prop];
　　}*/
　　return elem;
　　}
　　/*
　　創(chuàng)建輪播圖容器和圖片
　　參數(shù)：
　　parent父容器，將創(chuàng)建好的容器和圖片放在父容器內(nèi)
　　1、創(chuàng)建圖片容器，容器寬度是兩張圖片的寬度
　　2、根據(jù)所有輪播圖地址數(shù)組，創(chuàng)建所有圖片并且放在數(shù)組imgList中
　　3、將第0張圖片放在創(chuàng)建圖片容器imgCon中
　　4、將圖片容器放在整個輪播圖容器中
　　*/
　　function createImgCon(parent){
　　imgCon=ce("div",{
　　position:"absolute",
　　width:2*WIDTH+"px",
　　height:HEIGHT+"px",
　　left:0
　　});
　　for(var i=0;i&lt;imgSrcList.length;i++){
　　var img=ce("img",{
　　width:WIDTH+"px",
　　height:HEIGHT+"PX"
　　});
　　img.src=imgSrcList&lt;i&gt;;
　　imgList.push(img);
　　}
　　imgCon.appendChild(imgList[0]);
　　parent.appendChild(imgCon);
　　}
　　/*
　　創(chuàng)建左右按鈕函數(shù)
　　參數(shù)：
　　parent父容器，將創(chuàng)建好的按鈕放在父容器內(nèi)
　　1、創(chuàng)建按鈕地址數(shù)組
　　2、循環(huán)這個地址數(shù)組，創(chuàng)建所有圖片，并且放置對應(yīng)的位置
　　3、設(shè)置圖片地址
　　4、將按鈕圖片放在輪播圖容器中
　　5、給左右按鈕增加點擊事件執(zhí)行函數(shù)bnClickHander
　　*/
　　function createButton(parent){
　　//局部變量
　　var arr=["left","right"];
　　for(var i=0;i&lt;arr.length;i++){
　　var img=ce("img",{
　　position:"absolute",
　　//(外容器高度-當(dāng)前圖片高度)/2垂直居中
　　top:(HEIGHT-60)/2+"px",
　　//如果是第0張圖片，左邊按鈕，定位居左50像素，否則none
　　left:i===0?"50px":"none",
　　//如果是第1張圖片，右邊按鈕，定位居右50像素，否則none
　　right:i===1?"50px":"none",
　　});
　　img.src=`./img/${arr&lt;i&gt;}.png`;
　　bnList.push(img);
　　parent.appendChild(img);
　　img.addEventListener("click",bnClickHander);
　　}
　　}
　　/*
　　創(chuàng)建小圓點容器
　　參數(shù)：
　　parent父容器，將創(chuàng)建好的小圓點放在父容器內(nèi)
　　1、創(chuàng)建ul設(shè)置樣式
　　2、根據(jù)圖片地址的數(shù)組，循環(huán)若干次，有多少圖片就循環(huán)多少次創(chuàng)建小圓點
　　3、將每個小圓點存在數(shù)組dotList中
　　4、將小圓點放在ul中
　　5、給ul增加點擊事件，實際是點擊小圓點，事件委托
　　*/
　　function createDotList(parent){
　　ul=ce("ul",{
　　listStyle:"none",
　　margin:0,
　　padding:0,
　　position:"absolute",
　　bottom:"50px"
　　});
　　for(var i=0;i&lt;imgSrcList.length;i++){
　　var dot=ce("li",{
　　width:"28px",
　　height:"28px",
　　borderRadius:"50%",
　　border:"2px solid#FF0000",
　　float:"left",
　　marginLeft:i===0?"0px":"15px"
　　});
　　dotList.push(dot);
　　ul.appendChild(dot);
　　}
　　//dotList=Array.from(ul.children);
　　parent.appendChild(ul);
　　ul.addEventListener("click",dotClickHandler);
　　}
　　/*
　　點擊左右按鈕事件函數(shù)
　　e點擊事件MouseEvent
　　e.target是被點擊的按鈕圖片
　　如果bool是true，也就是當(dāng)前輪播圖正在播放時，點擊按鈕跳出，不繼續(xù)執(zhí)行
　　1、判斷被點擊圖片的地址里面是包含有l(wèi)eft.png字符串
　　如果有，就是點擊左側(cè)按鈕，反之就是右側(cè)按鈕
　　2、如果點擊了左側(cè)按鈕，當(dāng)前圖片下標(biāo)-1
　　如果小于0，讓它為當(dāng)前圖片地址數(shù)量-1，最大應(yīng)有的圖片下標(biāo)，并且設(shè)置方向是向右運動
　　3、如果點擊了右側(cè)按鈕，當(dāng)前圖片下標(biāo)+1，如果大于當(dāng)前圖片地址數(shù)量-1，就讓它為0
　　回到最開始第0張圖片，并且設(shè)置方向是向右運動
　　*/
　　function bnClickHander(e){
　　if(bool)return;
　　//查找圖片的src地址中是否包含
　　if(e.target.src.includes("left.png")){
　　pos--;
　　//imgSrcList.length-1圖片數(shù)組的長度減一，也就是pos根據(jù)圖片數(shù)組的長度來定值
　　if(pos&lt;0)pos=imgSrcList.length-1;
　　direction=RIGHT;
　　}else{
　　pos++;
　　if(pos&gt;imgSrcList.length-1)pos=0;
　　direction=LEFT;
　　}
　　createNextImg();
　　}
　　/*
　　小圓點點擊事件函數(shù)
　　e鼠標(biāo)事件對象MouseEvent
　　e.target是鼠標(biāo)點擊的目標(biāo)
　　因為使用是事件委托，因此判斷點擊目標(biāo)是不是li，如果不是就跳出
　　如果bool是true，也就是當(dāng)前輪播圖正在播放時，點擊按鈕跳出，不繼續(xù)執(zhí)行
　　1、判斷點擊目標(biāo)是否是li，不是跳出
　　2、獲取當(dāng)前點擊的小圓點時數(shù)組中第幾個
　　3、如果當(dāng)前的點擊小圓點的下標(biāo)和當(dāng)前展示圖片的下標(biāo)相同時，跳出不處理
　　4、如果大于當(dāng)前展示圖片的下標(biāo)，方向設(shè)置為向左運動，反之向右
　　5、將當(dāng)前點擊的下標(biāo)設(shè)為當(dāng)前應(yīng)展現(xiàn)圖片的下標(biāo)
　　*/
　　function dotClickHandler(e){
　　if(bool)return;
　　//if(e.target.nodeName!="LI")return;
　　if(e.target.constructor!==HTMLLIElement)return;
　　var index=dotList.indexOf(e.target);
　　if(index===pos)return;
　　direction=index&gt;pos?LEFT:RIGHT;
　　pos=index;
　　createNextImg();
　　}
　　/*
　　創(chuàng)建下一張需要顯示的圖片
　　當(dāng)點擊左右按鈕和當(dāng)點擊小圓點時，觸發(fā)該函數(shù)
　　1、如果方向想左運動，給圖片容器尾部添加新的圖片
　　2、如果方向向有運動，給圖片容器的最頭部添加新圖片
　　但是這個時候原圖被擠到最后，然后將整個容器向左移動一個圖片寬度
　　3、設(shè)置完成后，設(shè)置bool是true，這時候就打開了動畫的播放開關(guān)
　　動畫就可以完成播放了
　　4、切換當(dāng)前小圓點
　　*/
　　function createNextImg(){
　　//console.log(direction,pos,imgList[pos]);
　　if(direction===LEFT){
　　imgCon.appendChild(imgList[pos]);
　　x=0;
　　}else if(direction===RIGHT){
　　//insertBefore要插入的元素，插入在誰的前面
　　imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);
　　imgCon.style.left=-WIDTH+"px";
　　x=-WIDTH;
　　}
　　bool=true;
　　changeDot();
　　}
　　/*
　　切換小圓點
　　preDot是對上一次小圓點的引用變量
　　剛開始第一次時，沒有引用，因此不執(zhí)行，并且設(shè)置第一次設(shè)置了第0個蕭遠山
　　更改了第0個小圓點的背景色
　　第二次進來上次小圓點的引用時第0個，所以就將上次的小圓點修改背景透明
　　將本次小圓點設(shè)置給這個引用，并且修改背景色
　　再次進入就可以修改原來的，設(shè)置新的
　　*/
　　function changeDot(){
　　if(preDot){
　　preDot.style.backgroundColor="rgba(255,0,0,0)";
　　}
　　preDot=dotList[pos];
　　preDot.style.backgroundColor="rgba(255,0,0,0.5)";
　　}
　　/*
　　每16毫秒執(zhí)行該函數(shù)一次
　　1、執(zhí)行imgConMove這個函數(shù)，讓圖片移動的方法
　　2、執(zhí)行自動輪播
　　*/
　　function animation(){
　　imgConMove();
　　autoplay();
　　}
　　/*
　　每16毫秒讓圖片移動一次
　　開始的時候就一直運行，因為有一個bool值判斷，如果false時，一直不能進入
　　如果可以進入
　　1、如果方向為左
　　不斷讓變量x遞減，每16毫秒減40像素，設(shè)置圖片容器位置，圖片容器就可以移動了
　　當(dāng)圖片容器的第一張圖完全移動到最左側(cè)以后，也就是x小于等于負(fù)的圖片寬度
　　設(shè)置bool值false，16毫秒后進入時直接跳出
　　刪除掉移到最左側(cè)的圖片，后面的圖片會補充到最前面，設(shè)置將x為0，讓整個容器向后挪回初始位置
　　2、如果方向向右
　　x不斷增加40像素
　　如果x大于0，表示左側(cè)的圖片已經(jīng)移到中間位置，原圖片移到了右側(cè)
　　這個時候停止運動，bool設(shè)為false，x設(shè)為初始的0，刪除右側(cè)的圖片
　　*/
　　function imgConMove(){
　　if(!bool)return;
　　if(direction===LEFT){
　　x-=SPEED;
　　if(x&lt;=-WIDTH){
　　imgCon.firstElementChild.remove();
　　x=0;
　　bool=false;
　　}
　　imgCon.style.left=x+"px";
　　}else if(direction===RIGHT){
　　x+=SPEED;
　　if(x&gt;=0){
　　bool=false;
　　x=0;
　　imgCon.lastElementChild.remove();
　　}
　　imgCon.style.left=x+"px";
　　}
　　}
　　/*
　　自動輪播
　　1、如果自動輪播開關(guān)是fasle時，跳出
　　2、time不斷減少
　　3、如果time大于0就不繼續(xù)執(zhí)行跳出
　　4、time等于0，設(shè)置time初始為300
　　5、創(chuàng)建一個點擊事件對象
　　6、向右側(cè)按鈕拋發(fā)這個點擊事件
　　*/
　　function autoplay(){
　　if(!autoBool)return;
　　time--;
　　if(time&gt;0)return;
　　time=300;
　　var evt=new MouseEvent("click");
　　bnList[1].dispatchEvent(evt);
　　}
　　&lt;/script&gt;
　　&lt;/body&gt;
　　&lt;/html&gt;

　　效果展示