js實現無縫輪播圖效果
本文實例為大家分享了js實現無縫輪播圖的具體代碼，供大家參考，具體內容如下
//Utils.js //封裝 預加載圖片var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) {//圖片地址 回調函數 var img=new Image(); img.num=0;//初始化num為0 圖片數 img.imgList=[];//存放圖片 img.srcList=srcList; img.callBack=callBack;//回調函數 img.addEventListener('load',this.loadHandler);//加載load img.src='http://www.gepszalag.com/bcjs/img/'+srcList[img.num];//拼接圖片地址 }, loadHandler:function (e) { //this 指代img /*cloneNode該方法將復制并返回調用它的節點的副本。 * 如果傳遞給它的參數是 true，它還將遞歸復制當前節點的所有子孫節點。 否則（也就是默認值，或者false），它只復制當前節點。*/ this.imgList.push(this.cloneNode(false));//將img圖片尾插入imgList數組 this.num++; if(this.num>=this.srcList.length){//圖片數>=srcList數組(保存圖片地址)的長度this.callBack(this.imgList);//將數組傳入回調函數return; } //事件偵聽沒有被刪除,只需更改src,監聽加載load后觸發該事件,進入該函數this.loadHandler this.src='http://www.gepszalag.com/bcjs/img/'+this.srcList[this.num]; } }})();
全部代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>無縫輪播圖</title> <script src='http://www.gepszalag.com/bcjs/js/Utils.js'></script></head><body> <script> //無縫輪播圖,全JS /* * 1輪播圖大容器-->圖片容器,左右按鈕,小圓點 * 2點擊按鈕,標志當前挪動圖片索引,移動的方向 * 3點擊小圓點,標志當前挪動圖片的索引,移動的方向 * 4創建目標圖片放置在當前圖片的前或后 * 5移動圖片容器到目標圖片位置后,刪除前或后原來的圖片 * */ var bnList,imgList,imgCon,ul,pre;//存儲 左右按鈕名 圖片名 圖片容器 下方圓點標簽容器 var position=0,//圖片的序號 direction='left',//方向 speed=30, time=300, autoBoolean=false, playBoolean=false; const WIDTH=1200,//常量定義輪播圖高寬 HEIGHT=400; init(); function init() { //調用Utils中的loadImg方法 將圖片名數組 和回調函數名傳入 Utils.loadImg(['left.png','right.png','a.jpeg','b.jpeg','c.jpeg','d.jpeg','e.jpeg'],createCarousel); } function createCarousel(list) {//創建輪播圖 bnList=list.splice(0,2);//將左右移動圖標名從list數組中移除，添入bnList數組 imgList=list;//將圖片名添入數組imgList imgList.forEach(function (t) {//遍歷數組，給每個img元素添加寬高 t.style.width=WIDTH+'px'; t.style.height=HEIGHT+'px'; }); var carousel=ce('div',{//調用函數ce創建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容器，包括輪播圖容器，圓點標簽， 左右按鈕 createImgCon(carousel);//調用函數createImgCon在 carousel中創建輪播圖圖片容器， 傳入carousel為父容器 createBn(carousel);//調用函數createBn中創建左右按鈕， 傳入carousel為父容器 createDot(carousel);//調用函數createDot中創建下方圓點標簽， 傳入carousel為父容器 document.body.appendChild(carousel);//在body中插入div carousel carousel.addEventListener('mouseenter',mouseHandler);//給div carousel添加鼠標進入事件 carousel.addEventListener('mouseleave',mouseHandler);//給div carousel添加鼠標離開事件 //下方圓點標簽距左邊距 ul.style.left=(WIDTH-ul.offsetWidth)/2+'px';changeDot(); setInterval(animation,16);//設置周期執行函數 } function mouseHandler(e) {//鼠標停止，開始輪播圖自動播放 if(e.type==='mouseenter'){//鼠標進入停止自動播放，重置time計時autoBoolean=false;time=300; }else if(e.type==='mouseleave'){//鼠標離開開始自動播放autoBoolean=true; } } function createImgCon(parent) {//創建輪播圖容器div imgCon=ce('div',{//調用ce創建divwidth:WIDTH+'px',height:HEIGHT+'px',position:'absolute',left:'0px' }); imgCon.appendChild(imgList[position]);//在創建的div imgCon 中添加圖片 parent.appendChild(imgCon);//在傳來的父元素div中添加新建的div imgCon }function createBn(parent) {//創建左右按鈕 接受傳來的父元素 bnList.forEach(function (t,index) {//遍歷數組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);//按鈕添加點擊監聽事件parent.appendChild(t);//在傳來的父元素中添加左右按鈕 }) }function createDot(parent) {//創建下方圓點標簽 ul=ce('ul',{//調用ce創建ul，添加樣式listStyle:'none',position:'absolute',bottom:'20px',margin:'0px',padding:'0px' }); imgList.forEach(function (t,index) {//遍歷imgList，有幾張圖創建幾個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添加監聽單擊時間 事件委托 parent.appendChild(ul);//在父元素中插入ul } function bnClickHandler(e) {//左右移點擊移動圖片 if(playBoolean) return; if(bnList.indexOf(this)===0){//點擊左移按鈕position--;//圖片序號--direction='right';//圖片方向向右if(position<0) position=imgList.length-1;//如果在第0張點左移，position為最后一張圖的序號 }else{//點擊右移按鈕position++;//圖片序號++direction='left';//圖片方向向左if(position>imgList.length-1) position=0;//如果在最后1張點右移，position為第一張圖的序號 } createNextImg();//創建下一張圖片 } function dotClickHandler(e) {//圓點標簽點擊移動圖片 if(playBoolean) return; if(e.target.nodeName!=='LI') return;//點擊的不是li return var arr=Array.from(this.children);//this=ul var index=arr.indexOf(e.target);//index存點擊的li在arr中的下標 if(index===position) return;//如果是當前這個位置點,不操作 if(index>position){//如果點擊的大于當前direction='left';//圖片方向向左 }else{//如果點擊的小于當前direction='right';//圖片方向向右 } position=index;//position賦值為點擊的li序號 createNextImg();//創建下一張圖片 }function createNextImg() {//創建下一張圖片 imgCon.style.width=WIDTH*2+'px';//將輪播圖容器寬度*2 if(direction==='left'){//如果圖片向左運動imgCon.appendChild(imgList[position]);//在當前圖片后面添加子元素 }else if(direction==='right'){//如果圖片向右運動imgCon.insertBefore(imgList[position],imgCon.firstElementChild);//在第一張圖片前面添加子元素imgCon.style.left=-WIDTH+'px';//移動原有圖片容器的位置左右一張圖片寬度 } playBoolean=true;//圖片加載完設置為true changeDot();//改變下方圓形標簽的顏色 } function changeDot() {//改變下方圓形標簽的顏色 if(pre){pre.style.backgroundColor='rgba(255,0,0,0)';//顏色初始化為透明 } pre=ul.children[position];//獲取當前輪播圖對應li pre.style.backgroundColor='rgba(255,0,0,0.5)';//顯示該li的顏色 }function animation() { imgPlay();//圖片移動 autoPlay();//自動移動 }function imgPlay() { if(!playBoolean) return; //為false return if(direction==='right'){//圖片右移imgCon.style.left=imgCon.offsetLeft+speed+'px';//圖片以speed的速度向右劃過if(imgCon.offsetLeft>=0){//運動到輪播圖框停止移動 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){//運動到輪播圖框左一張圖片的寬度處停止移動 playBoolean=false; imgCon.firstElementChild.remove();//移走上一張圖片 imgCon.style.left='0px';//重置輪播圖容器位置 imgCon.style.width=WIDTH+'px';//重置輪播圖容器寬度} } }function autoPlay() {//自動輪播 if(!autoBoolean) return; time--; if(time>0) return; time=200; var evt=new MouseEvent('click'); bnList[1].dispatchEvent(evt);//dispatchEvent事件觸發器，觸發bnList[1]的click事件 }function ce(type,style) { //創建標簽元素并添加樣式 (創建元素類型 ,添加的css樣式) var elem=document.createElement(type); /*Object.assign方法用來將源對象（source）的所有可枚舉屬性， 復制到目標對象（target）。它至少需要兩個對象作為參數， 第一個參數是目標對象，后面的參數都是源對象。*/ Object.assign(elem.style,style); return elem; } </script></body></html>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備