資訊專欄INFORMATION COLUMN
js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖，其實(shí)十分簡單，話不多說，我們直接看示例：
輪播圖案例
<!DOCTYPE html>
<html>
<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、給最外層的輪播圖增加事件偵聽，一個(gè)是鼠標(biāo)進(jìn)入，一個(gè)是鼠標(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è)置自動(dòng)輪播的開關(guān)是false，不會(huì)自動(dòng)輪播
并且重新將計(jì)時(shí)設(shè)置為300
2、如果離開輪播圖，設(shè)置自動(dòng)輪播開關(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)建元素的樣式，對象，使用對象方式給出該容器的樣式
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、將圖片容器放在整個(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)建所有圖片，并且放置對應(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
回到最開始第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ù)組的長度減一，也就是pos根據(jù)圖片數(shù)組的長度來定值
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)事件對象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í)候就打開了動(dòng)畫的播放開關(guān)
動(dòng)畫就可以完成播放了
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要插入的元素，插入在誰的前面
imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);
imgCon.style.left=-WIDTH+"px";
x=-WIDTH;
}
bool=true;
changeDot();
}
/*
切換小圓點(diǎn)
preDot是對上一次小圓點(diǎn)的引用變量
剛開始第一次時(shí)，沒有引用，因此不執(zhí)行，并且設(shè)置第一次設(shè)置了第0個(gè)蕭遠(yuǎn)山
更改了第0個(gè)小圓點(diǎn)的背景色
第二次進(jìn)來上次小圓點(diǎn)的引用時(shí)第0個(gè)，所以就將上次的小圓點(diǎn)修改背景透明
將本次小圓點(diǎn)設(shè)置給這個(gè)引用，并且修改背景色
再次進(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這個(gè)函數(shù)，讓圖片移動(dòng)的方法
2、執(zhí)行自動(dòng)輪播
*/
function animation(){
imgConMove();
autoplay();
}
/*
每16毫秒讓圖片移動(dòng)一次
開始的時(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)輪播開關(guān)是fasle時(shí)，跳出
2、time不斷減少
3、如果time大于0就不繼續(xù)執(zhí)行跳出
4、time等于0，設(shè)置time初始為300
5、創(chuàng)建一個(gè)點(diǎn)擊事件對象
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>效果展示
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/128201.html
摘要：在線體驗(yàn)地址源碼項(xiàng)目預(yù)覽主頁面登錄頁面注冊頁面會(huì)員中心電影播放頁面電影彈幕功能視頻網(wǎng)站項(xiàng)目已經(jīng)完功能如下當(dāng)前最新版本增加自動(dòng)抓取功能，網(wǎng)站數(shù)據(jù)定期實(shí)時(shí)更新電影和電視劇數(shù)據(jù)抓取電影數(shù)據(jù)信息前端展現(xiàn)電影頁面圖片的自動(dòng)抓取下載和展示代碼結(jié)構(gòu)調(diào)整簡 在線體驗(yàn)地址:http://vip.52tech.tech/ GIthub源碼：https://github.com/xiugangzha......
摘要：綁定輪播事件然后是鼠標(biāo)移入移出事件的綁定鼠標(biāo)移入移出事件移入時(shí)停止輪播播放的定時(shí)器，移出后自動(dòng)開始下一張的播放。 通過上一篇文章的學(xué)習(xí)，我們基本掌握了一個(gè)輪子的封裝和開發(fā)流程。那么這次將帶大家開發(fā)一個(gè)更有難度的項(xiàng)目——輪播圖，希望能進(jìn)一步加深大家對于面向?qū)ο蟛寮_發(fā)的理解和認(rèn)識。 So, Lets begin! 目前項(xiàng)目使用 ES5及UMD 規(guī)范封裝，所以在前端暫時(shí)只支持標(biāo)簽的引入方式...
摘要：獲取下一個(gè)元素節(jié)點(diǎn)，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個(gè)元素節(jié)點(diǎn)為選擇中，調(diào)用運(yùn)動(dòng)框架實(shí)現(xiàn)動(dòng)畫，添加定時(shí)器，調(diào)用該函數(shù)，實(shí)現(xiàn)自動(dòng)播放。移出時(shí)，開啟定時(shí)器，繼續(xù)輪播。輪播間隔時(shí)間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。 轉(zhuǎn)載自我的個(gè)人博客 歡迎大家批評指正 包括5部分： 小練習(xí)1-處理用戶輸入 小練習(xí)2-日期對象的使用 小練習(xí)3：輪播圖 小練習(xí)4：輸入提示框 小練習(xí)...
摘要：獲取下一個(gè)元素節(jié)點(diǎn)，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個(gè)元素節(jié)點(diǎn)為選擇中，調(diào)用運(yùn)動(dòng)框架實(shí)現(xiàn)動(dòng)畫，添加定時(shí)器，調(diào)用該函數(shù)，實(shí)現(xiàn)自動(dòng)播放。移出時(shí)，開啟定時(shí)器，繼續(xù)輪播。輪播間隔時(shí)間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。 轉(zhuǎn)載自我的個(gè)人博客 歡迎大家批評指正 包括5部分： 小練習(xí)1-處理用戶輸入 小練習(xí)2-日期對象的使用 小練習(xí)3：輪播圖 小練習(xí)4：輸入提示框 小練習(xí)...
閱讀 596·2023-03-27 18:33
閱讀 790·2023-03-26 17:27
閱讀 684·2023-03-26 17:14
閱讀 645·2023-03-17 21:13
閱讀 573·2023-03-17 08:28
閱讀 1895·2023-02-27 22:32
閱讀 1376·2023-02-27 22:27
閱讀 2280·2023-01-20 08:28
