js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖

更新時(shí)間：2022年07月12日 17:24:34 作者：_Wz_

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖，供大家參考，具體內(nèi)容如下

輪播圖案例

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
<script>
? ? // 1、布局
? ? // 2、定義當(dāng)前第幾張圖片和應(yīng)該向什么方向運(yùn)動(dòng)
? ? // 3、將需要放置的圖片根據(jù)方向放在前面或者后面
? ? // 4、將整個(gè)容器向左或者向右移動(dòng)
? ? // 5、完成后將上一次的圖片刪除

? ? // imgCon ? 放置所有圖片的容器
? ? // dotList ?放置小圓點(diǎn)列表
? ? // bnList ? 放置左右按鈕的數(shù)組
? ? // imgList ?放置所有圖片的數(shù)組
? ? // pos ? ? ?確認(rèn)當(dāng)前圖片是第幾張
? ? // direction圖片運(yùn)行的方向
? ? // 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)建小圓點(diǎn)列表
? ? ? ? 5、將輪播圖容器放在body中
? ? ? ? 6、切換小圓點(diǎn)，因?yàn)楫?dāng)前是第0張，所以讓第一個(gè)小圓點(diǎn)背景為紅色
? ? ? ? 7、將小圓點(diǎn)容器設(shè)置水平居中
? ? ? ? 8、設(shè)置時(shí)間間隔，每16毫秒執(zhí)行animation函數(shù)一次，因?yàn)橐幻胧?000毫秒
? ? ? ? ? ? 一秒中執(zhí)行60次，就是60幀頻，每次花費(fèi)的時(shí)間是16.6666毫秒
? ? ? ? 9、給最外層的輪播圖增加事件偵聽(tīng)，一個(gè)是鼠標(biāo)進(jìn)入，一個(gè)是鼠標(biāo)離開(kāi)
? ? */
? ? 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);
? ? }

? ? /*
? ? ? ? 輪播圖進(jìn)入和離開(kāi)的事件函數(shù)
? ? ? ? 1、如果進(jìn)入輪播圖，設(shè)置自動(dòng)輪播的開(kāi)關(guān)是false，不會(huì)自動(dòng)輪播
? ? ? ? ? ? 并且重新將計(jì)時(shí)設(shè)置為300
? ? ? ? 2、如果離開(kāi)輪播圖，設(shè)置自動(dòng)輪播開(kāi)關(guān)是true，就會(huì)自動(dòng)輪播了
? ? */
? ? 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)建元素的樣式，對(duì)象，使用對(duì)象方式給出該容器的樣式
? ? ? ? 1、根據(jù)類型創(chuàng)建元素
? ? ? ? 2、將給入的樣式設(shè)置給元素的行內(nèi)樣式
? ? ? ? 3、返回創(chuàng)建好的元素
? ? */
? ? function ce(type,style){
? ? ? ? var elem=document.createElement(type);
? ? ? ? // ES6的方法，將后面的對(duì)象中的屬性復(fù)制到前面對(duì)象中
? ? ? ? Object.assign(elem.style,style);// 等同于下面寫(xiě)法
? ? ? ? /* 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、將圖片容器放在整個(gè)輪播圖容器中
? ? */
? ? function createImgCon(parent){
? ? ? ? imgCon=ce("div",{
? ? ? ? ? ? position:"absolute",
? ? ? ? ? ? width:2*WIDTH+"px",
? ? ? ? ? ? height:HEIGHT+"px",
? ? ? ? ? ? left:0
? ? ? ? });
? ? ? ? for(var i=0;i<imgSrcList.length;i++){
? ? ? ? ? ? var img=ce("img",{
? ? ? ? ? ? ? ? width:WIDTH+"px",
? ? ? ? ? ? ? ? height:HEIGHT+"PX"
? ? ? ? ? ? });
? ? ? ? ? ? img.src=imgSrcList[i];
? ? ? ? ? ? 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)這個(gè)地址數(shù)組，創(chuàng)建所有圖片，并且放置對(duì)應(yīng)的位置
? ? ? ? 3、設(shè)置圖片地址
? ? ? ? 4、將按鈕圖片放在輪播圖容器中
? ? ? ? 5、給左右按鈕增加點(diǎn)擊事件執(zhí)行函數(shù)bnClickHander
? ? */
? ? function createButton(parent){
? ? ? ? // 局部變量
? ? ? ? var arr=["left","right"];
? ? ? ? for(var i=0;i<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[i]}.png`;
? ? ? ? ? ? bnList.push(img);
? ? ? ? ? ? parent.appendChild(img);
? ? ? ? ? ? img.addEventListener("click",bnClickHander);
? ? ? ? }
? ? }

? ? /*
? ? ? ? 創(chuàng)建小圓點(diǎn)容器
? ? ? ? 參數(shù)：
? ? ? ? ? ? parent 父容器，將創(chuàng)建好的小圓點(diǎn)放在父容器內(nèi)
? ? ? ? 1、創(chuàng)建ul設(shè)置樣式
? ? ? ? 2、根據(jù)圖片地址的數(shù)組，循環(huán)若干次，有多少圖片就循環(huán)多少次創(chuàng)建小圓點(diǎn)
? ? ? ? 3、將每個(gè)小圓點(diǎn)存在數(shù)組dotList中
? ? ? ? 4、將小圓點(diǎn)放在ul中
? ? ? ? 5、給ul增加點(diǎn)擊事件，實(shí)際是點(diǎn)擊小圓點(diǎn)，事件委托

? ? */
? ? function createDotList(parent){
? ? ? ? ul=ce("ul",{
? ? ? ? ? ? listStyle:"none",
? ? ? ? ? ? margin:0,
? ? ? ? ? ? padding:0,
? ? ? ? ? ? position:"absolute",
? ? ? ? ? ? bottom:"50px"
? ? ? ? });
? ? ? ? for(var i=0;i<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);
? ? }

? ? /*
? ? ? ? 點(diǎn)擊左右按鈕事件函數(shù)
? ? ? ? e ? 點(diǎn)擊事件 ? ?MouseEvent
? ? ? ? e.target 是被點(diǎn)擊的按鈕圖片
? ? ? ? 如果bool是true，也就是當(dāng)前輪播圖正在播放時(shí)，點(diǎn)擊按鈕跳出，不繼續(xù)執(zhí)行
? ? ? ? 1、判斷被點(diǎn)擊圖片的地址里面是包含有l(wèi)eft.png字符串
? ? ? ? 如果有，就是點(diǎn)擊左側(cè)按鈕，反之就是右側(cè)按鈕
? ? ? ? 2、如果點(diǎn)擊了左側(cè)按鈕，當(dāng)前圖片下標(biāo)-1
? ? ? ? 如果小于0，讓它為當(dāng)前圖片地址數(shù)量-1，最大應(yīng)有的圖片下標(biāo)，并且設(shè)置方向是向右運(yùn)動(dòng)
? ? ? ? 3、如果點(diǎn)擊了右側(cè)按鈕，當(dāng)前圖片下標(biāo)+1，如果大于當(dāng)前圖片地址數(shù)量-1，就讓它為0
? ? ? ? 回到最開(kāi)始第0張圖片，并且設(shè)置方向是向右運(yùn)動(dòng)
? ? */
? ? function bnClickHander(e){
? ? ? ? if(bool) return;
? ? ? ? // 查找圖片的src地址中是否包含
? ? ? ? if(e.target.src.includes("left.png")){
? ? ? ? ? ? pos--;
? ? ? ? ? ? // imgSrcList.length-1圖片數(shù)組的長(zhǎng)度減一，也就是pos根據(jù)圖片數(shù)組的長(zhǎng)度來(lái)定值
? ? ? ? ? ? if(pos<0) pos=imgSrcList.length-1;
? ? ? ? ? ? direction=RIGHT;
? ? ? ? }else{
? ? ? ? ? ? pos++;
? ? ? ? ? ? if(pos>imgSrcList.length-1) pos=0;
? ? ? ? ? ? direction=LEFT;
? ? ? ? }
? ? ? ? createNextImg();
? ? }

? ? /*
? ? ? ? 小圓點(diǎn)點(diǎn)擊事件函數(shù)
? ? ? ? e 鼠標(biāo)事件對(duì)象 MouseEvent
? ? ? ? e.target 是鼠標(biāo)點(diǎn)擊的目標(biāo)
? ? ? ? 因?yàn)槭褂檬鞘录?，因此判斷點(diǎn)擊目標(biāo)是不是li，如果不是就跳出
? ? ? ? 如果bool是true，也就是當(dāng)前輪播圖正在播放時(shí)，點(diǎn)擊按鈕跳出，不繼續(xù)執(zhí)行
? ? ? ? 1、判斷點(diǎn)擊目標(biāo)是否是li，不是跳出
? ? ? ? 2、獲取當(dāng)前點(diǎn)擊的小圓點(diǎn)時(shí)數(shù)組中第幾個(gè)
? ? ? ? 3、如果當(dāng)前的點(diǎn)擊小圓點(diǎn)的下標(biāo)和當(dāng)前展示圖片的下標(biāo)相同時(shí)，跳出不處理
? ? ? ? 4、如果大于當(dāng)前展示圖片的下標(biāo)，方向設(shè)置為向左運(yùn)動(dòng)，反之向右
? ? ? ? 5、將當(dāng)前點(diǎn)擊的下標(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>pos ? LEFT : RIGHT;
? ? ? ? pos=index;
? ? ? ? createNextImg();
? ? }

? ? /*
? ? ? ? 創(chuàng)建下一張需要顯示的圖片
? ? ? ? 當(dāng)點(diǎn)擊左右按鈕和當(dāng)點(diǎn)擊小圓點(diǎn)時(shí)，觸發(fā)該函數(shù)
? ? ? ? 1、如果方向想左運(yùn)動(dòng)，給圖片容器尾部添加新的圖片
? ? ? ? 2、如果方向向有運(yùn)動(dòng)，給圖片容器的最頭部添加新圖片
? ? ? ? 但是這個(gè)時(shí)候原圖被擠到最后，然后將整個(gè)容器向左移動(dòng)一個(gè)圖片寬度
? ? ? ? 3、設(shè)置完成后，設(shè)置bool是true，這時(shí)候就打開(kāi)了動(dòng)畫(huà)的播放開(kāi)關(guān)
? ? ? ? 動(dòng)畫(huà)就可以完成播放了
? ? ? ? 4、切換當(dāng)前小圓點(diǎn)
? ? */
? ? function createNextImg(){
? ? ? ? // console.log(direction,pos,imgList[pos]);
? ? ? ? if(direction===LEFT){
? ? ? ? ? ? imgCon.appendChild(imgList[pos]);
? ? ? ? ? ? x=0;
? ? ? ? }else if(direction===RIGHT){
? ? ? ? ? ? // insertBefore要插入的元素，插入在誰(shuí)的前面
? ? ? ? ? ? imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);
? ? ? ? ? ? imgCon.style.left=-WIDTH+"px";
? ? ? ? ? ? x=-WIDTH;
? ? ? ? }
? ? ? ? bool=true;
? ? ? ? changeDot();
? ? }

? ? /*
? ? ? ? 切換小圓點(diǎn)
? ? ? ? preDot是對(duì)上一次小圓點(diǎn)的引用變量
? ? ? ? 剛開(kāi)始第一次時(shí)，沒(méi)有引用，因此不執(zhí)行，并且設(shè)置第一次設(shè)置了第0個(gè)蕭遠(yuǎn)山
? ? ? ? 更改了第0個(gè)小圓點(diǎn)的背景色
? ? ? ? 第二次進(jìn)來(lái)上次小圓點(diǎn)的引用時(shí)第0個(gè)，所以就將上次的小圓點(diǎn)修改背景透明
? ? ? ? 將本次小圓點(diǎn)設(shè)置給這個(gè)引用，并且修改背景色
? ? ? ? 再次進(jìn)入就可以修改原來(lái)的，設(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這個(gè)函數(shù)，讓圖片移動(dòng)的方法
? ? ? ? 2、執(zhí)行自動(dòng)輪播
? ? */
? ? function animation(){
? ? ? ? imgConMove();
? ? ? ? autoplay();
? ? }

? ? /*
? ? ? ? 每16毫秒讓圖片移動(dòng)一次
? ? ? ? 開(kāi)始的時(shí)候就一直運(yùn)行，因?yàn)橛幸粋€(gè)bool值判斷，如果false時(shí)，一直不能進(jìn)入
? ? ? ? 如果可以進(jìn)入
? ? ? ? 1、如果方向?yàn)樽?
? ? ? ? ? ? 不斷讓變量x遞減，每16毫秒減40像素，設(shè)置圖片容器位置，圖片容器就可以移動(dòng)了
? ? ? ? ? ? 當(dāng)圖片容器的第一張圖完全移動(dòng)到最左側(cè)以后，也就是x小于等于負(fù)的圖片寬度
? ? ? ? ? ? 設(shè)置bool值false，16毫秒后進(jìn)入時(shí)直接跳出
? ? ? ? ? ? 刪除掉移到最左側(cè)的圖片，后面的圖片會(huì)補(bǔ)充到最前面，設(shè)置將x為0，讓整個(gè)容器向后挪回初始位置
? ? ? ? 2、如果方向向右
? ? ? ? ? ? x不斷增加40像素
? ? ? ? ? ? 如果x大于0，表示左側(cè)的圖片已經(jīng)移到中間位置，原圖片移到了右側(cè)
? ? ? ? ? ? 這個(gè)時(shí)候停止運(yùn)動(dòng)，bool設(shè)為false，x設(shè)為初始的0，刪除右側(cè)的圖片
? ? */
? ? function imgConMove(){
? ? ? ? if(!bool) return;
? ? ? ? if(direction===LEFT){
? ? ? ? ? ? x-=SPEED;
? ? ? ? ? ? if(x<=-WIDTH){
? ? ? ? ? ? ? ? imgCon.firstElementChild.remove();
? ? ? ? ? ? ? ? x=0;
? ? ? ? ? ? ? ? bool=false;
? ? ? ? ? ? }
? ? ? ? ? ? imgCon.style.left=x+"px";
? ? ? ? }else if(direction===RIGHT){
? ? ? ? ? ? x+=SPEED;
? ? ? ? ? ? if(x>=0){
? ? ? ? ? ? ? ? bool=false;
? ? ? ? ? ? ? ? x=0;
? ? ? ? ? ? ? ? imgCon.lastElementChild.remove();
? ? ? ? ? ? }
? ? ? ? ? ? imgCon.style.left=x+"px";
? ? ? ? }
? ? }
? ??
? ? /*
? ? ? ? 自動(dòng)輪播
? ? ? ? 1、如果自動(dòng)輪播開(kāi)關(guān)是fasle時(shí)，跳出
? ? ? ? 2、time不斷減少
? ? ? ? 3、如果time大于0就不繼續(xù)執(zhí)行跳出
? ? ? ? 4、time等于0，設(shè)置time初始為300
? ? ? ? 5、創(chuàng)建一個(gè)點(diǎn)擊事件對(duì)象
? ? ? ? 6、向右側(cè)按鈕拋發(fā)這個(gè)點(diǎn)擊事件
? ? */
? ? function autoplay(){
? ? ? ? if(!autoBool) return;
? ? ? ? time--;
? ? ? ? if(time>0) return;
? ? ? ? time=300;
? ? ? ? var evt=new MouseEvent("click");
? ? ? ? bnList[1].dispatchEvent(evt);
? ? }
</script>
</body>
</html>

效果展示