JavaScript中怎么實(shí)現(xiàn)無(wú)縫輪播圖-創(chuàng)新互聯(lián)

JavaScript中怎么實(shí)現(xiàn)無(wú)縫輪播圖，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作與策劃設(shè)計(jì),上蔡網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:上蔡等地區(qū)。上蔡做網(wǎng)站價(jià)格咨詢:18982081108

html結(jié)構(gòu)

js代碼

//獲取頁(yè)面元素 var ul = document.getElementsByTagName("ul")[0]; var inner = document.getElementsByClassName("inner")[0]; var circle = document.getElementsByClassName("circle")[0]; var spanArr = circle.children; var direction =document.getElementsByClassName("direction")[0]; var dirChid=direction.children; var innerWidth = inner.offsetWidth; //兩個(gè)定時(shí)器（一個(gè)記錄圖片，一個(gè)記錄小圓球） var dindex = 0; var span = 0; //var ulNewLi = ul.children[0].cloneNode(true); // ul.appendChild(ulNewLi); for(var i = 0;i<spanArr.length;i++){ //給每個(gè)span綁定index，為了和ul中的頁(yè)面聯(lián)動(dòng) spanArr[i].index = i; spanArr[i].onmouseover = function () { //點(diǎn)擊分頁(yè)小球，添加current類，current類定義了小球的背景顏色 for (var j = 0; j<spanArr.length ;j++) { spanArr[j].className = ""; } this.className = "current"; dindex = span = this.index; //調(diào)用緩動(dòng)函數(shù)，傳入?yún)?shù)：移動(dòng)元素，目標(biāo)距離 animation(ul,-this.index*innerWidth); } } //為左箭頭綁定事件 //dindex 記錄圖片的索引，span記錄小球的索引，圖片個(gè)數(shù)為6，小球的個(gè)數(shù)為5 dirChid[0].οnclick=function (event) { //每次點(diǎn)擊左切換，圖片的索引減一，小球的索引減一 dindex--; //圖片的索引<0時(shí)，設(shè)置ul的位置為第五個(gè)圖片的位置 if(dindex<0){ ul.style.left= -innerWidth*spanArr.length+"px"; dindex= spanArr.length-1; } animation(ul,-dindex*innerWidth); //小球的索引減一 span--; //當(dāng)小球索引小于0時(shí)，設(shè)置它的索引為4 if(span<0){ span= spanArr.length-1; } //點(diǎn)亮小球 for(var i= 0 ; i<spanArr.length;i++){ spanArr[i].className = ""; } spanArr[span].className = "current"; } //為右箭頭綁定事件， dirChid[1].οnclick=function () { dindex++; //圖片的索引大于小球長(zhǎng)度個(gè)數(shù)時(shí)，設(shè)置ul的位置為第1張圖片的位置 if(dindex>spanArr.length){ ul.style.left=0; dindex=1; } animation(ul,-dindex*innerWidth); span++; if(span>spanArr.length-1){ span= 0; } for(var k= 0 ; k<spanArr.length;k++){ spanArr[k].className = ""; } spanArr[span].className = "current"; } //封裝緩動(dòng)動(dòng)畫函數(shù) function animation(ele,target) { clearInterval(ele.timer); ele.timer=setInterval(function () { //獲取起使位置 leader= ele.offsetLeft; //獲取緩動(dòng)動(dòng)畫步長(zhǎng) var step = (target-leader)/10; //支持不同方向的移動(dòng)，所以步長(zhǎng)有正有負(fù) step = step >0? Math.ceil(step):Math.floor(step); //當(dāng)前位置= 盒子的位置+步長(zhǎng) leader = leader +step; ele.style.left = leader+"px"; if(ele.offsetLeft === target) { clearInterval(ele.timer); } },30)}

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

網(wǎng)站名稱：JavaScript中怎么實(shí)現(xiàn)無(wú)縫輪播圖-創(chuàng)新互聯(lián)
文章位置：http://www.muchs.cn/article10/dhjcgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、域名注冊(cè)、App設(shè)計(jì)、面包屑導(dǎo)航、網(wǎng)站導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容