js實現(xiàn)點擊切換和自動播放的輪播圖
更新時間：2022年07月12日 17:24:34 作者：_Wz_
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)點擊切換和自動播放的輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)點擊切換和自動播放的輪播圖，供大家參考，具體內(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)該向什么方向運動
? ? // 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)進(jìn)入，一個是鼠標(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);
? ? }
? ? /*
? ? ? ? 輪播圖進(jìn)入和離開的事件函數(shù)
? ? ? ? 1、如果進(jìn)入輪播圖，設(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<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)這個地址數(shù)組，創(chuàng)建所有圖片，并且放置對應(yīng)的位置
? ? ? ? 3、設(shè)置圖片地址
? ? ? ? 4、將按鈕圖片放在輪播圖容器中
? ? ? ? 5、給左右按鈕增加點擊事件執(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)建小圓點容器
? ? ? ? 參數(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<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<0) pos=imgSrcList.length-1;
? ? ? ? ? ? direction=RIGHT;
? ? ? ? }else{
? ? ? ? ? ? pos++;
? ? ? ? ? ? if(pos>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>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個蕭遠(yuǎn)山
? ? ? ? 更改了第0個小圓點的背景色
? ? ? ? 第二次進(jìn)來上次小圓點的引用時第0個，所以就將上次的小圓點修改背景透明
? ? ? ? 將本次小圓點設(shè)置給這個引用，并且修改背景色
? ? ? ? 再次進(jìn)入就可以修改原來的，設(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時，一直不能進(jìn)入
? ? ? ? 如果可以進(jìn)入
? ? ? ? 1、如果方向為左
? ? ? ? ? ? 不斷讓變量x遞減，每16毫秒減40像素，設(shè)置圖片容器位置，圖片容器就可以移動了
? ? ? ? ? ? 當(dāng)圖片容器的第一張圖完全移動到最左側(cè)以后，也就是x小于等于負(fù)的圖片寬度
? ? ? ? ? ? 設(shè)置bool值false，16毫秒后進(jìn)入時直接跳出
? ? ? ? ? ? 刪除掉移到最左側(cè)的圖片，后面的圖片會補(bǔ)充到最前面，設(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<=-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";
? ? ? ? }
? ? }
? ??
? ? /*
? ? ? ? 自動輪播
? ? ? ? 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>0) return;
? ? ? ? time=300;
? ? ? ? var evt=new MouseEvent("click");
? ? ? ? bnList[1].dispatchEvent(evt);
? ? }
</script>
</body>
</html>效果展示
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家深入的介紹了JavaScript中的for循環(huán)，其中包括ES5中的三種for循環(huán)，分別是簡單for循環(huán)、for-in以及forEach，另外還詳細(xì)介紹了ES6新增的一種循環(huán)：for-of ，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
Stop SQL Server...2007-06-06
一個JavaScript遞歸實現(xiàn)反轉(zhuǎn)數(shù)組字符串的實例
這篇文章主要介紹了一個JavaScript遞歸實現(xiàn)反轉(zhuǎn)數(shù)組字符串的實例，很不錯，非常適合新手朋友們2014-10-10
如何將一個String和多個String值進(jìn)行比較思路分析
開發(fā)中我們經(jīng)常需要將一個String和多個String值進(jìn)行比較。直覺反應(yīng)是使用||符號連接多個===完成，感興趣的朋友可以了解下哈2013-04-04
這篇文章主要為大家詳細(xì)介紹了小程序日歷控件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
在前端程序開發(fā)中，經(jīng)常會實現(xiàn)js輪播圖的效果，怎么實現(xiàn)的呢？下面小編給大家分享基于基于JavaScript實現(xiàn)輪播圖代碼 ，非常不錯，感興趣的朋友可以參考下2016-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)打字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了js常用分割取字符串的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)與數(shù)據(jù)傳遞方案
在開發(fā)過程中經(jīng)常會遇到在微信小程序的頁面跳轉(zhuǎn)以及數(shù)據(jù)傳遞的知識點,所以下面這篇文章主要給大家介紹了關(guān)于小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)與數(shù)據(jù)傳遞的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
微信企業(yè)號開發(fā)之微信考勤Cookies的使用
使用微信考勤，每次使用微信企業(yè)號開發(fā):微信用戶信息和web網(wǎng)頁的session的關(guān)系這個里邊的方法，調(diào)用微信的接口，有點慢，微信官方也推薦使用Cookies，但如何使用Cookies，自己卻一直沒有搞清楚。下面小編幫大家解決難題，需要的朋友可以參考下2015-09-09