資訊專欄INFORMATION COLUMN
js實現點擊切換和自動播放的輪播圖，其實十分簡單，話不多說，我們直接看示例：
輪播圖案例
<!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、定義當前第幾張圖片和應該向什么方向運動
//3、將需要放置的圖片根據方向放在前面或者后面
//4、將整個容器向左或者向右移動
//5、完成后將上一次的圖片刪除
//imgCon放置所有圖片的容器
//dotList放置小圓點列表
//bnList放置左右按鈕的數組
//imgList放置所有圖片的數組
//pos確認當前圖片是第幾張
//direction圖片運行的方向
//imgSrcList圖片地址數組
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()初始化函數
1、創建輪播圖外層容器
2、創建輪播圖圖片容器
3、創建按鈕列表
4、創建小圓點列表
5、將輪播圖容器放在body中
6、切換小圓點，因為當前是第0張，所以讓第一個小圓點背景為紅色
7、將小圓點容器設置水平居中
8、設置時間間隔，每16毫秒執行animation函數一次，因為一秒是1000毫秒
一秒中執行60次，就是60幀頻，每次花費的時間是16.6666毫秒
9、給最外層的輪播圖增加事件偵聽，一個是鼠標進入，一個是鼠標離開
*/
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);
}
/*
輪播圖進入和離開的事件函數
1、如果進入輪播圖，設置自動輪播的開關是false，不會自動輪播
并且重新將計時設置為300
2、如果離開輪播圖，設置自動輪播開關是true，就會自動輪播了
*/
function mouseHandler(e){
if(e.type==="mouseenter"){
autoBool=false;
time=300;
}else if(e.type==="mouseleave"){
autoBool=true;
}
}
/*
創建元素
參數：
type創建元素的類型，字符串
style創建元素的樣式，對象，使用對象方式給出該容器的樣式
1、根據類型創建元素
2、將給入的樣式設置給元素的行內樣式
3、返回創建好的元素
*/
function ce(type,style){
var elem=document.createElement(type);
//ES6的方法，將后面的對象中的屬性復制到前面對象中
Object.assign(elem.style,style);//等同于下面寫法
/*for(var prop in style){
elem.style[prop]=style[prop];
}*/
return elem;
}
/*
創建輪播圖容器和圖片
參數：
parent父容器，將創建好的容器和圖片放在父容器內
1、創建圖片容器，容器寬度是兩張圖片的寬度
2、根據所有輪播圖地址數組，創建所有圖片并且放在數組imgList中
3、將第0張圖片放在創建圖片容器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);
}
/*
創建左右按鈕函數
參數：
parent父容器，將創建好的按鈕放在父容器內
1、創建按鈕地址數組
2、循環這個地址數組，創建所有圖片，并且放置對應的位置
3、設置圖片地址
4、將按鈕圖片放在輪播圖容器中
5、給左右按鈕增加點擊事件執行函數bnClickHander
*/
function createButton(parent){
//局部變量
var arr=["left","right"];
for(var i=0;i<arr.length;i++){
var img=ce("img",{
position:"absolute",
//(外容器高度-當前圖片高度)/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);
}
}
/*
創建小圓點容器
參數：
parent父容器，將創建好的小圓點放在父容器內
1、創建ul設置樣式
2、根據圖片地址的數組，循環若干次，有多少圖片就循環多少次創建小圓點
3、將每個小圓點存在數組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);
}
/*
點擊左右按鈕事件函數
e點擊事件MouseEvent
e.target是被點擊的按鈕圖片
如果bool是true，也就是當前輪播圖正在播放時，點擊按鈕跳出，不繼續執行
1、判斷被點擊圖片的地址里面是包含有left.png字符串
如果有，就是點擊左側按鈕，反之就是右側按鈕
2、如果點擊了左側按鈕，當前圖片下標-1
如果小于0，讓它為當前圖片地址數量-1，最大應有的圖片下標，并且設置方向是向右運動
3、如果點擊了右側按鈕，當前圖片下標+1，如果大于當前圖片地址數量-1，就讓它為0
回到最開始第0張圖片，并且設置方向是向右運動
*/
function bnClickHander(e){
if(bool)return;
//查找圖片的src地址中是否包含
if(e.target.src.includes("left.png")){
pos--;
//imgSrcList.length-1圖片數組的長度減一，也就是pos根據圖片數組的長度來定值
if(pos<0)pos=imgSrcList.length-1;
direction=RIGHT;
}else{
pos++;
if(pos>imgSrcList.length-1)pos=0;
direction=LEFT;
}
createNextImg();
}
/*
小圓點點擊事件函數
e鼠標事件對象MouseEvent
e.target是鼠標點擊的目標
因為使用是事件委托，因此判斷點擊目標是不是li，如果不是就跳出
如果bool是true，也就是當前輪播圖正在播放時，點擊按鈕跳出，不繼續執行
1、判斷點擊目標是否是li，不是跳出
2、獲取當前點擊的小圓點時數組中第幾個
3、如果當前的點擊小圓點的下標和當前展示圖片的下標相同時，跳出不處理
4、如果大于當前展示圖片的下標，方向設置為向左運動，反之向右
5、將當前點擊的下標設為當前應展現圖片的下標
*/
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();
}
/*
創建下一張需要顯示的圖片
當點擊左右按鈕和當點擊小圓點時，觸發該函數
1、如果方向想左運動，給圖片容器尾部添加新的圖片
2、如果方向向有運動，給圖片容器的最頭部添加新圖片
但是這個時候原圖被擠到最后，然后將整個容器向左移動一個圖片寬度
3、設置完成后，設置bool是true，這時候就打開了動畫的播放開關
動畫就可以完成播放了
4、切換當前小圓點
*/
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是對上一次小圓點的引用變量
剛開始第一次時，沒有引用，因此不執行，并且設置第一次設置了第0個蕭遠山
更改了第0個小圓點的背景色
第二次進來上次小圓點的引用時第0個，所以就將上次的小圓點修改背景透明
將本次小圓點設置給這個引用，并且修改背景色
再次進入就可以修改原來的，設置新的
*/
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毫秒執行該函數一次
1、執行imgConMove這個函數，讓圖片移動的方法
2、執行自動輪播
*/
function animation(){
imgConMove();
autoplay();
}
/*
每16毫秒讓圖片移動一次
開始的時候就一直運行，因為有一個bool值判斷，如果false時，一直不能進入
如果可以進入
1、如果方向為左
不斷讓變量x遞減，每16毫秒減40像素，設置圖片容器位置，圖片容器就可以移動了
當圖片容器的第一張圖完全移動到最左側以后，也就是x小于等于負的圖片寬度
設置bool值false，16毫秒后進入時直接跳出
刪除掉移到最左側的圖片，后面的圖片會補充到最前面，設置將x為0，讓整個容器向后挪回初始位置
2、如果方向向右
x不斷增加40像素
如果x大于0，表示左側的圖片已經移到中間位置，原圖片移到了右側
這個時候停止運動，bool設為false，x設為初始的0，刪除右側的圖片
*/
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、如果自動輪播開關是fasle時，跳出
2、time不斷減少
3、如果time大于0就不繼續執行跳出
4、time等于0，設置time初始為300
5、創建一個點擊事件對象
6、向右側按鈕拋發這個點擊事件
*/
function autoplay(){
if(!autoBool)return;
time--;
if(time>0)return;
time=300;
var evt=new MouseEvent("click");
bnList[1].dispatchEvent(evt);
}
</script>
</body>
</html>效果展示
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128201.html
摘要：在線體驗地址源碼項目預覽主頁面登錄頁面注冊頁面會員中心電影播放頁面電影彈幕功能視頻網站項目已經完功能如下當前最新版本增加自動抓取功能，網站數據定期實時更新電影和電視劇數據抓取電影數據信息前端展現電影頁面圖片的自動抓取下載和展示代碼結構調整簡 在線體驗地址:http://vip.52tech.tech/ GIthub源碼：https://github.com/xiugangzha......
摘要：綁定輪播事件然后是鼠標移入移出事件的綁定鼠標移入移出事件移入時停止輪播播放的定時器，移出后自動開始下一張的播放。 通過上一篇文章的學習，我們基本掌握了一個輪子的封裝和開發流程。那么這次將帶大家開發一個更有難度的項目——輪播圖，希望能進一步加深大家對于面向對象插件開發的理解和認識。 So, Lets begin! 目前項目使用 ES5及UMD 規范封裝，所以在前端暫時只支持標簽的引入方式...
摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。 轉載自我的個人博客 歡迎大家批評指正 包括5部分： 小練習1-處理用戶輸入 小練習2-日期對象的使用 小練習3：輪播圖 小練習4：輸入提示框 小練習...
摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。 轉載自我的個人博客 歡迎大家批評指正 包括5部分： 小練習1-處理用戶輸入 小練習2-日期對象的使用 小練習3：輪播圖 小練習4：輸入提示框 小練習...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 521·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2178·2023-01-20 08:28
