文章詳情頁

js實現(xiàn)無縫輪播圖效果

瀏覽：182日期：2024-05-20 10:00:06

本文實例為大家分享了js實現(xiàn)無縫輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

//Utils.js //封裝預加載圖片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://www.b3g6.com/bcjs/img/'+srcList[img.num];//拼接圖片地址 }, loadHandler:function (e) { //this 指代img /*cloneNode該方法將復制并返回調(diào)用它的節(jié)點的副本。 * 如果傳遞給它的參數(shù)是 true，它還將遞歸復制當前節(jié)點的所有子孫節(jié)點。否則（也就是默認值，或者false），它只復制當前節(jié)點。*/ 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ā)該事件,進入該函數(shù)this.loadHandler this.src='http://www.b3g6.com/bcjs/img/'+this.srcList[this.num]; } }})();

全部代碼：

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>無縫輪播圖</title> <script src='http://www.b3g6.com/bcjs/js/Utils.js'></script></head><body> <script> //無縫輪播圖,全JS /* * 1輪播圖大容器-->圖片容器,左右按鈕,小圓點 * 2點擊按鈕,標志當前挪動圖片索引,移動的方向 * 3點擊小圓點,標志當前挪動圖片的索引,移動的方向 * 4創(chuàng)建目標圖片放置在當前圖片的前或后 * 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() { //調(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);//將左右移動圖標名從list數(shù)組中移除，添入bnList數(shù)組 imgList=list;//將圖片名添入數(shù)組imgList imgList.forEach(function (t) {//遍歷數(shù)組，給每個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容器，包括輪播圖容器，圓點標簽，左右按鈕 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)建下方圓點標簽，傳入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);//設置周期執(zhí)行函數(shù) } function mouseHandler(e) {//鼠標停止，開始輪播圖自動播放 if(e.type==='mouseenter'){//鼠標進入停止自動播放，重置time計時autoBoolean=false;time=300; }else if(e.type==='mouseleave'){//鼠標離開開始自動播放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);//按鈕添加點擊監(jiān)聽事件parent.appendChild(t);//在傳來的父元素中添加左右按鈕 }) }function createDot(parent) {//創(chuàng)建下方圓點標簽 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)建幾個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)聽單擊時間事件委托 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();//創(chuàng)建下一張圖片 } 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();//創(chuàng)建下一張圖片 }function createNextImg() {//創(chuàng)建下一張圖片 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事件觸發(fā)器，觸發(fā)bnList[1]的click事件 }function ce(type,style) { //創(chuàng)建標簽元素并添加樣式 (創(chuàng)建元素類型 ,添加的css樣式) var elem=document.createElement(type); /*Object.assign方法用來將源對象（source）的所有可枚舉屬性，復制到目標對象（target）。它至少需要兩個對象作為參數(shù)，第一個參數(shù)是目標對象，后面的參數(shù)都是源對象。*/ Object.assign(elem.style,style); return elem; } </script></body></html>

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。

JavaScript

上一條：JS如何在數(shù)組指定位置插入元素下一條：js實現(xiàn)無縫輪播圖

相關文章：

1. IntelliJ IDEA安裝插件的方法步驟2. Docker 部署 Prometheus的安裝詳細教程3. idea重置默認配置的方法步驟4. idea導入maven項目的方法5. IntelliJ IDEA設置自動提示功能快捷鍵的方法6. idea設置代碼格式化的方法步驟7. IntelliJ IDEA調(diào)整字體大小的方法8. 通過Django Admin+HttpRunner1.5.6實現(xiàn)簡易接口測試平臺9. idea打開多個窗口的操作方法10. idea給項目打war包的方法步驟

排行榜

					
					IntelliJ IDEA安裝插件的方法步驟
Docker 部署 Prometheus的安裝詳細教程
idea導入maven項目的方法
IntelliJ IDEA設置自動提示功能快捷鍵的方法
idea重置默認配置的方法步驟
IntelliJ IDEA調(diào)整字體大小的方法
IntelliJ IDEA設置背景圖片的方法步驟
通過Django Admin+HttpRunner1.5.6實現(xiàn)簡易接口測試平臺
idea打開多個窗口的操作方法
idea給項目打war包的方法步驟
docker /var/lib/docker/aufs/mnt 目錄清理方法
				