您好,登錄后才能下訂單哦!
這篇文章主要介紹js原生代碼如何實(shí)現(xiàn)輪播圖,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
一、現(xiàn)在我們來(lái)看看它是什么樣的效果,截一張圖給大家看:
二、無(wú)論我們做什么特效,都要記住一個(gè)原則,先寫靜態(tài)的代碼,再做動(dòng)態(tài)的處理!
我們的輪播靜態(tài)效果用html和css來(lái)實(shí)現(xiàn):
1、為了代碼的規(guī)范性,我們采用css和js外聯(lián)的方式,如下:
2、body的部分也需要我們規(guī)范的命名:
好了,到這里我們們的html部分就結(jié)束了!現(xiàn)在框架已經(jīng)搭建好,下一步是css樣式設(shè)置了:
3、css樣式的設(shè)置,靈活性比較大,因?yàn)檫@要根據(jù)我們的頁(yè)面來(lái)做具體設(shè)置和規(guī)定,下面的效果僅供參考! 我們直接上代碼:
/*內(nèi)外邊距的設(shè)置*/ * { margin:0; padding:0; } /*圖片在box中的位置*/ img { vertical-align: top; } /*盒子box的整體樣式*/ .css_box { width: 500px; height: 265px; margin:100px auto; position: relative; overflow: hidden; border: 1px solid green; } /*滾動(dòng)盒子樣式*/ .slider { width: 500px; height: 200px; border: 1px solid red; } /*滾動(dòng)盒子主要部分的樣式*/ .slider-main { border: 1px solid yellow; width: 500px; height: 200px; } /*滾動(dòng)盒子主要部分的圖片樣式*/ .slider-main-img { position: absolute; top: 0; left: 0; width: 500px; height: 200px; } .slider-main-img img { width: 100%; } /*兩側(cè)滾動(dòng)控制的樣式*/ .slider_ctrl { text-align: center; padding-top: 25px; } /*這樣的類名,在html中找不到,但是又起到了作用,所以只有可能是是在js中創(chuàng)建了這樣的類名!*/ /*控制點(diǎn)選輪播圖的樣式*/ .slider-ctrl-con { width: 24px; height: 20px; display:inline-block; background:url(../images/icon.jpg) no-repeat -24px -782px; margin: 0 5px; cursor: pointer; text-indent: -20em; overflow: hidden; } .current { background-position: -24px -762px; } /*滑動(dòng)控制的兩個(gè)span樣式*/ .slider-ctrl-prev,.slider-ctrl-next { position: absolute; top: 50%; margin-top: -35px; background:url(../images/icon.jpg) no-repeat 6px top; width: 30px; height: 35px; opacity: 0.8; cursor: pointer; } .slider-ctrl-prev { left: 0; } .slider-ctrl-next { right: 0; background-position: -6px -44px; } /*css樣式到此暫時(shí)結(jié)束*/
好了,到此我們的靜態(tài)的效果已經(jīng)搭建好,要想實(shí)現(xiàn)我們需要的功能js是我們的核心,下面我們就用原生的代碼來(lái)實(shí)現(xiàn)它:
關(guān)鍵技術(shù)一:我們的輪播圖要?jiǎng)悠饋?lái),利用定時(shí)器現(xiàn)在自動(dòng)滾動(dòng)的效果,圖片的轉(zhuǎn)換牽涉到了層疊,最后我們?cè)倏紤]到瀏覽器的兼容問(wèn)題!
做到這些,是我們js的第一步。等等,因?yàn)閹缀跛械妮啿ザ家獙?shí)現(xiàn)這些效果,如果我們?cè)倌茏鲆粋€(gè)封裝,隨時(shí)調(diào)用,那是不是就太完美了,
沒(méi)錯(cuò),我們就是要這么做!
我在這里封裝了一個(gè)名叫animate的函數(shù),函數(shù)封裝完成后我們只需要調(diào)用即可實(shí)現(xiàn):
// 這是一個(gè)運(yùn)動(dòng)框架,而且是多屬性的! // 創(chuàng)建一個(gè)名為animate的函數(shù)!obj為對(duì)象,json是json值,fn是回調(diào)函數(shù)! function animate(obj,json,fn) { clearInterval(obj.timer);//清除定時(shí)器,這一步是有影響的! // 給對(duì)象設(shè)置一個(gè)定時(shí)器! obj.timer = setInterval(function() { var flag = true; //用來(lái)判斷定時(shí)器什么時(shí)候停止! //for in 循環(huán),遍歷json對(duì)象! for(var attr in json){ var current = 0; // 當(dāng)前的狀態(tài),這一步很重要! if(attr == "opacity") { current = parseInt(getStyle(obj,attr)*100); } else { current = parseInt(getStyle(obj,attr)); } // 步長(zhǎng)! var step = ( json[attr] - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); // 判斷透明度! if(attr == "opacity") { //in是一個(gè)二元的運(yùn)算符,意思是第一個(gè)操作數(shù)的值是第二個(gè)操作數(shù)的屬性名,會(huì)返回true! // 這樣就可以判斷這個(gè)對(duì)象的樣式上中是否有opacity的屬性了! if("opacity" in obj.style) { // 如果條件成立,設(shè)置透明度值 obj.style.opacity = (current + step) /100; } else { // 如果不成立,則使用濾鏡功能! obj.style.filter = "alpha(opacity = "+(current + step)+")"; } } // 層疊! else if(attr == "zIndex") { obj.style.zIndex = json[attr]; } else { obj.style[attr] = current + step + "px" ; } // 截止值! if(current != json[attr]) { flag = false; } } if(flag) { clearInterval(obj.timer); // 如果有回調(diào)就使用回調(diào)! if(fn) { fn(); } } },5) } // 考慮兼容性問(wèn)題! function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return window.getComputedStyle(obj,null)[attr]; } } // 多屬性運(yùn)動(dòng)框架結(jié)束!
關(guān)鍵技術(shù)二:有了animate的封裝函數(shù), 為我們節(jié)省了不少的力氣,可是我們面對(duì)不用的要求還要
有不同的效果啊,下面就讓我們來(lái)實(shí)現(xiàn)具體的效果!
1、我們使用js的從古到今沒(méi)有變過(guò)的第一步:獲取所有需要的元素,即是DOM的操作:
2、進(jìn)行for循環(huán),開始遍歷所有的圖片內(nèi)容:
3、遍歷按鈕:
4、設(shè)置setSquare函數(shù):
5、設(shè)置定時(shí)器:
6、鼠標(biāo)經(jīng)過(guò)的時(shí)候的效果:
以上是“js原生代碼如何實(shí)現(xiàn)輪播圖”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。