js實(shí)現(xiàn)無縫輪播圖效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)無縫輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
//Utils.js //封裝 預(yù)加載圖片var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) {//圖片地址 回調(diào)函數(shù) var img=new Image(); img.num=0;//初始化num為0 圖片數(shù) img.imgList=[];//存放圖片 img.srcList=srcList; img.callBack=callBack;//回調(diào)函數(shù) img.addEventListener('load',this.loadHandler);//加載load img.src='http://m.b3g6.com/bcjs/img/'+srcList[img.num];//拼接圖片地址 }, loadHandler:function (e) { //this 指代img /*cloneNode該方法將復(fù)制并返回調(diào)用它的節(jié)點(diǎn)的副本。 * 如果傳遞給它的參數(shù)是 true，它還將遞歸復(fù)制當(dāng)前節(jié)點(diǎn)的所有子孫節(jié)點(diǎn)。 否則（也就是默認(rèn)值，或者false），它只復(fù)制當(dāng)前節(jié)點(diǎn)。*/ this.imgList.push(this.cloneNode(false));//將img圖片尾插入imgList數(shù)組 this.num++; if(this.num>=this.srcList.length){//圖片數(shù)>=srcList數(shù)組(保存圖片地址)的長度this.callBack(this.imgList);//將數(shù)組傳入回調(diào)函數(shù)return; } //事件偵聽沒有被刪除,只需更改src,監(jiān)聽加載load后觸發(fā)該事件,進(jìn)入該函數(shù)this.loadHandler this.src='http://m.b3g6.com/bcjs/img/'+this.srcList[this.num]; } }})();
全部代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>無縫輪播圖</title> <script src='http://m.b3g6.com/bcjs/js/Utils.js'></script></head><body> <script> //無縫輪播圖,全JS /* * 1輪播圖大容器-->圖片容器,左右按鈕,小圓點(diǎn) * 2點(diǎn)擊按鈕,標(biāo)志當(dāng)前挪動(dòng)圖片索引,移動(dòng)的方向 * 3點(diǎn)擊小圓點(diǎn),標(biāo)志當(dāng)前挪動(dòng)圖片的索引,移動(dòng)的方向 * 4創(chuàng)建目標(biāo)圖片放置在當(dāng)前圖片的前或后 * 5移動(dòng)圖片容器到目標(biāo)圖片位置后,刪除前或后原來的圖片 * */ var bnList,imgList,imgCon,ul,pre;//存儲(chǔ) 左右按鈕名 圖片名 圖片容器 下方圓點(diǎn)標(biāo)簽容器 var position=0,//圖片的序號(hào) direction='left',//方向 speed=30, time=300, autoBoolean=false, playBoolean=false; const WIDTH=1200,//常量定義輪播圖高寬 HEIGHT=400; init(); function init() { //調(diào)用Utils中的loadImg方法 將圖片名數(shù)組 和回調(diào)函數(shù)名傳入 Utils.loadImg(['left.png','right.png','a.jpeg','b.jpeg','c.jpeg','d.jpeg','e.jpeg'],createCarousel); } function createCarousel(list) {//創(chuàng)建輪播圖 bnList=list.splice(0,2);//將左右移動(dòng)圖標(biāo)名從list數(shù)組中移除，添入bnList數(shù)組 imgList=list;//將圖片名添入數(shù)組imgList imgList.forEach(function (t) {//遍歷數(shù)組，給每個(gè)img元素添加寬高 t.style.width=WIDTH+'px'; t.style.height=HEIGHT+'px'; }); var carousel=ce('div',{//調(diào)用函數(shù)ce創(chuàng)建div并添加樣式width:WIDTH+'px',height:HEIGHT+'px',position:'relative',margin:'auto',overflow:'hidden',backgroundColor:'rgba(255,0,0,0.3)' }); console.log(carousel);//carousel為最外層div容器，包括輪播圖容器，圓點(diǎn)標(biāo)簽， 左右按鈕 createImgCon(carousel);//調(diào)用函數(shù)createImgCon在 carousel中創(chuàng)建輪播圖圖片容器， 傳入carousel為父容器 createBn(carousel);//調(diào)用函數(shù)createBn中創(chuàng)建左右按鈕， 傳入carousel為父容器 createDot(carousel);//調(diào)用函數(shù)createDot中創(chuàng)建下方圓點(diǎn)標(biāo)簽， 傳入carousel為父容器 document.body.appendChild(carousel);//在body中插入div carousel carousel.addEventListener('mouseenter',mouseHandler);//給div carousel添加鼠標(biāo)進(jìn)入事件 carousel.addEventListener('mouseleave',mouseHandler);//給div carousel添加鼠標(biāo)離開事件 //下方圓點(diǎn)標(biāo)簽距左邊距 ul.style.left=(WIDTH-ul.offsetWidth)/2+'px';changeDot(); setInterval(animation,16);//設(shè)置周期執(zhí)行函數(shù) } function mouseHandler(e) {//鼠標(biāo)停止，開始輪播圖自動(dòng)播放 if(e.type==='mouseenter'){//鼠標(biāo)進(jìn)入停止自動(dòng)播放，重置time計(jì)時(shí)autoBoolean=false;time=300; }else if(e.type==='mouseleave'){//鼠標(biāo)離開開始自動(dòng)播放autoBoolean=true; } } function createImgCon(parent) {//創(chuàng)建輪播圖容器div imgCon=ce('div',{//調(diào)用ce創(chuàng)建divwidth:WIDTH+'px',height:HEIGHT+'px',position:'absolute',left:'0px' }); imgCon.appendChild(imgList[position]);//在創(chuàng)建的div imgCon 中添加圖片 parent.appendChild(imgCon);//在傳來的父元素div中添加新建的div imgCon }function createBn(parent) {//創(chuàng)建左右按鈕 接受傳來的父元素 bnList.forEach(function (t,index) {//遍歷數(shù)組bnListObject.assign(t.style,{ position:'absolute', left:index===0 ? '20px' : 'none', right:index===1 ? '20px' : 'none', top:(HEIGHT-t.height)/2+'px'});t.addEventListener('click',bnClickHandler);//按鈕添加點(diǎn)擊監(jiān)聽事件parent.appendChild(t);//在傳來的父元素中添加左右按鈕 }) }function createDot(parent) {//創(chuàng)建下方圓點(diǎn)標(biāo)簽 ul=ce('ul',{//調(diào)用ce創(chuàng)建ul，添加樣式listStyle:'none',position:'absolute',bottom:'20px',margin:'0px',padding:'0px' }); imgList.forEach(function (t,index) {//遍歷imgList，有幾張圖創(chuàng)建幾個(gè)livar li=ce('li',{//新建li，添加樣式 float:'left', width:'18px', height:'18px', borderRadius:'9px', border:'1px solid rgba(255,0,0,0.8)', marginLeft: index===0 ? '0px' : '10px'});ul.appendChild(li);//ul中插入li }); ul.addEventListener('click',dotClickHandler);//給ul添加監(jiān)聽單擊時(shí)間 事件委托 parent.appendChild(ul);//在父元素中插入ul } function bnClickHandler(e) {//左右移點(diǎn)擊移動(dòng)圖片 if(playBoolean) return; if(bnList.indexOf(this)===0){//點(diǎn)擊左移按鈕position--;//圖片序號(hào)--direction='right';//圖片方向向右if(position<0) position=imgList.length-1;//如果在第0張點(diǎn)左移，position為最后一張圖的序號(hào) }else{//點(diǎn)擊右移按鈕position++;//圖片序號(hào)++direction='left';//圖片方向向左if(position>imgList.length-1) position=0;//如果在最后1張點(diǎn)右移，position為第一張圖的序號(hào) } createNextImg();//創(chuàng)建下一張圖片 } function dotClickHandler(e) {//圓點(diǎn)標(biāo)簽點(diǎn)擊移動(dòng)圖片 if(playBoolean) return; if(e.target.nodeName!=='LI') return;//點(diǎn)擊的不是li return var arr=Array.from(this.children);//this=ul var index=arr.indexOf(e.target);//index存點(diǎn)擊的li在arr中的下標(biāo) if(index===position) return;//如果是當(dāng)前這個(gè)位置點(diǎn),不操作 if(index>position){//如果點(diǎn)擊的大于當(dāng)前direction='left';//圖片方向向左 }else{//如果點(diǎn)擊的小于當(dāng)前direction='right';//圖片方向向右 } position=index;//position賦值為點(diǎn)擊的li序號(hào) createNextImg();//創(chuàng)建下一張圖片 }function createNextImg() {//創(chuàng)建下一張圖片 imgCon.style.width=WIDTH*2+'px';//將輪播圖容器寬度*2 if(direction==='left'){//如果圖片向左運(yùn)動(dòng)imgCon.appendChild(imgList[position]);//在當(dāng)前圖片后面添加子元素 }else if(direction==='right'){//如果圖片向右運(yùn)動(dòng)imgCon.insertBefore(imgList[position],imgCon.firstElementChild);//在第一張圖片前面添加子元素imgCon.style.left=-WIDTH+'px';//移動(dòng)原有圖片容器的位置左右一張圖片寬度 } playBoolean=true;//圖片加載完設(shè)置為true changeDot();//改變下方圓形標(biāo)簽的顏色 } function changeDot() {//改變下方圓形標(biāo)簽的顏色 if(pre){pre.style.backgroundColor='rgba(255,0,0,0)';//顏色初始化為透明 } pre=ul.children[position];//獲取當(dāng)前輪播圖對(duì)應(yīng)li pre.style.backgroundColor='rgba(255,0,0,0.5)';//顯示該li的顏色 }function animation() { imgPlay();//圖片移動(dòng) autoPlay();//自動(dòng)移動(dòng) }function imgPlay() { if(!playBoolean) return; //為false return if(direction==='right'){//圖片右移imgCon.style.left=imgCon.offsetLeft+speed+'px';//圖片以speed的速度向右劃過if(imgCon.offsetLeft>=0){//運(yùn)動(dòng)到輪播圖框停止移動(dòng) imgCon.style.left='0px'; playBoolean=false; imgCon.lastElementChild.remove();//移走上一張圖片 imgCon.style.width=WIDTH+'px';//重置輪播圖容器寬度} }else if(direction==='left'){//圖片左移imgCon.style.left=imgCon.offsetLeft-speed+'px';//圖片以speed的速度向左劃過if(imgCon.offsetLeft<=-WIDTH){//運(yùn)動(dòng)到輪播圖框左一張圖片的寬度處停止移動(dòng) playBoolean=false; imgCon.firstElementChild.remove();//移走上一張圖片 imgCon.style.left='0px';//重置輪播圖容器位置 imgCon.style.width=WIDTH+'px';//重置輪播圖容器寬度} } }function autoPlay() {//自動(dòng)輪播 if(!autoBoolean) return; time--; if(time>0) return; time=200; var evt=new MouseEvent('click'); bnList[1].dispatchEvent(evt);//dispatchEvent事件觸發(fā)器，觸發(fā)bnList[1]的click事件 }function ce(type,style) { //創(chuàng)建標(biāo)簽元素并添加樣式 (創(chuàng)建元素類型 ,添加的css樣式) var elem=document.createElement(type); /*Object.assign方法用來將源對(duì)象（source）的所有可枚舉屬性， 復(fù)制到目標(biāo)對(duì)象（target）。它至少需要兩個(gè)對(duì)象作為參數(shù)， 第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象。*/ Object.assign(elem.style,style); return elem; } </script></body></html>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Python 合并拼接字符串的方法2. python 網(wǎng)頁解析器掌握第三方 lxml 擴(kuò)展庫與 xpath 的使用方法3. 用PHP調(diào)用數(shù)據(jù)庫的存貯過程！4. JS中6個(gè)對(duì)象數(shù)組去重的方法5. Vue實(shí)現(xiàn)動(dòng)態(tài)樣式的多種方法匯總6. Python計(jì)算任意多邊形間的重疊面積的示例代碼7. Vue Element前端應(yīng)用開發(fā)之界面語言國際化8. 使用IntelliJ IDEA 配置安卓(Android)開發(fā)環(huán)境的教程詳解(新手必看)9. JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁碼代碼實(shí)例10. SpringBoot整合Redis的步驟
網(wǎng)公網(wǎng)安備