您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript怎么實(shí)現(xiàn)網(wǎng)易云輪播效果”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“JavaScript怎么實(shí)現(xiàn)網(wǎng)易云輪播效果”文章能幫助大家解決問(wèn)題。
1、div寬度直接與瀏覽器界面寬度一致:width:100%
2、怎么讓圖片在一個(gè)絕對(duì)定位的盒子中垂直居中顯示?
繼續(xù)加絕對(duì)定位。然后改變top,和left的值
3、采用外置的js文件,需要等到頁(yè)面加載完畢:window.οnlοad=function(){}
4、添加和移除元素的類名:先獲取DOM對(duì)象,然后通過(guò)classList.add('current')(里面不需要加.)和classList.remove()即可添加類型和刪除類名。
5、事件委托: 比如有100個(gè)li,每個(gè)li都有相同的click點(diǎn)擊事件,可能我們會(huì)用for循環(huán)的方法,來(lái)遍歷所有的li,然后給它們添加事件。這樣會(huì)增加dom的交互次數(shù) 事件委托是利用事件的冒泡原理實(shí)現(xiàn),事件從最深的節(jié)點(diǎn)開始,然后逐步向上傳播事件。頁(yè)面上有這么一個(gè)節(jié)點(diǎn)樹,div>ul>li>a;比如給最里面的a加一個(gè)click點(diǎn)擊事件,那么這個(gè)事件就會(huì)一層一層的往外執(zhí)行,執(zhí)行順序a>li>ul>div。當(dāng)給最外面的div加點(diǎn)擊事件,那么里面的ul,li,a做點(diǎn)擊事件的時(shí)候,都會(huì)冒泡到最外層的div上,所以都會(huì)觸發(fā),這就是事件委托,委托它們父級(jí)代為執(zhí)行事件。
6、js改變?cè)乇尘皥Durl:document.getElementById("元素id").style.backgroundImage="url(圖片路徑)";
7、js實(shí)現(xiàn)定時(shí)器的暫停與開啟:
var dsq = setInterval(gd,40);oDiv.οnmοuseοver= function() //停止定時(shí)器實(shí)現(xiàn)暫停的效果 { clearInterval(dsq); } oDiv.οnmοuseοut= function() //開啟定時(shí)器,實(shí)現(xiàn)重啟的效果 { //setInterval(gd,40); 錯(cuò)誤的示范\當(dāng)多次點(diǎn)擊的時(shí)候,因?yàn)殚_辟了很多個(gè)定時(shí)器,效果就是一直跳動(dòng),看起來(lái)很像是因?yàn)闆](méi)有加節(jié)流閥的效果。 dsq=setInterval(gd,40); //需要再開啟這個(gè)定時(shí)器,一定要在定時(shí)器前面加上你定義的那個(gè)定時(shí)器的變量名,如果不加的話就會(huì)又開啟一個(gè)新的定時(shí)器然后你上面的那個(gè)停止dsq定時(shí)器的函數(shù)是無(wú)法停止這個(gè)新的定時(shí)器的,當(dāng)你鼠標(biāo)不斷移入移出都會(huì)開啟一個(gè)新的定時(shí)器,多個(gè)定時(shí)器同時(shí)執(zhí)行相同的動(dòng)作,這樣相當(dāng)于你的定時(shí)器里面的時(shí)間成倍的減少,效果就是你的定時(shí)器越來(lái)越快的執(zhí)行, }
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="41.css" rel="external nofollow" > <script src="41.js"></script> </head> <body> <!-- 盒子里面方圖片,可以通過(guò)左右按鈕改變圖片,同步的改變小圓圈的對(duì)應(yīng)。不操作時(shí)會(huì)自動(dòng)跳轉(zhuǎn)圖片--> <!-- 1、添加圖片 --> <div class="nav"> <div class="box"> <div class="img"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="current"><img src="https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&quality=89" alt=""></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src=" https://p1.music.126.net/Q-GYxr6Opgmveo7cTulcOw==/109951167232940234.jpg?imageView&quality=89" alt=""></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="https://p1.music.126.net/9lvqxXnb-uXiGE0n4ChJiA==/109951167232823192.jpg?imageView&quality=89" alt=""></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="https://p1.music.126.net/GnAlY92neUdHWfAGwWz_cQ==/109951167232850389.jpg?imageView&quality=89" alt=""></a> </div> <!-- 2、添加左右箭頭 --> <div class="right"><img src="right.png" alt=""></div> <div class="left"><img src="left.png" alt=""></div> <!-- 3、添加下面的小圓圈 --> <ul> </ul> </div> </div> </body> </html>
* { margin: 0px; padding: 0px; } .box { position: relative; width: 1200px; height: 500px; margin: auto; } .img { width: 1200px; height: 500px; margin: auto; overflow: hidden; } img { width: 100%; height: 100% } .nav { width: 100%; height: 500px; margin-top: 20px; /* 這個(gè)url地址需要根據(jù)img圖片的顯示來(lái)改變的 */ background-image: url(https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&blur=40x20); background-repeat: no-repeat; background-size: 100%; } .right, .left { width: 80px; height: 120px; position: absolute; top: 210px; right: -80px; } .left { left: -80px; } .right img, .left img { position: absolute; top: 25px; left: 15px; width: 50px; height: 70px; } .left:hover, .right:hover { background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } ul { width: 600px; height: 100px; position: absolute; bottom: -20px; left: 340px; } ul li { float: left; margin-left: 100px; list-style: disc; color: rgb(239, 232, 232); font-size: 50px; } ul .there { z-index: 2; color: rgb(237, 8, 8); } ul li:hover { color: red } a { width: 1200px; height: 500px; display: none; } .current { display: block; }
window.onload = function() { //定時(shí)器,自動(dòng)改變圖片以及背景圖以及小圓圈 var timer = window.setInterval(fun, [3000]) function fun() { for (i = 0; i < as.length; i++) { if (as[i].getAttribute('class') == 'current') { flag = i } } //如果flag=as.length-1;那么就讓flag=0的a的類變?yōu)閏urrent,如果flag<as.length-1,那么就讓flag+1的a的class變?yōu)閏urrent if (flag == as.length - 1) { //排他思想 for (i = 0; i < as.length; i++) { as[i].classList.remove('current') lis[i].classList.remove('there') } as[0].classList.add('current') lis[0].classList.add('there') e = 0 } if (flag < as.length - 1) { for (i = 0; i < as.length; i++) { as[i].classList.remove('current') lis[i].classList.remove('there') } as[flag + 1].classList.add('current') lis[flag + 1].classList.add('there') e = flag + 1 } fn(e) } timer = setInterval(fun, [3000]) //點(diǎn)擊的時(shí)候需要先把定時(shí)器關(guān)閉 // 應(yīng)該時(shí)根據(jù)img圖片(直接根據(jù)a鏈接吧)的數(shù)量來(lái)動(dòng)態(tài)生成li var as = document.querySelectorAll('a') var ul = document.querySelector('ul') var nav = document.querySelector('.nav') for (i = 0; i < as.length; i++) { // 創(chuàng)建元素 var li = document.createElement('li') ul.appendChild(li) //添加元素 } //給按鈕添加點(diǎn)擊事件 var flag var left = document.querySelector('.left') var right = document.querySelector('.right') var lis = document.querySelectorAll('li') lis[0].classList.add('there') console.log(lis); left.addEventListener('click', function() { window.clearInterval(timer) //左邊按鈕按下一次,圖片往左邊變化一張,相當(dāng)于要獲得當(dāng)前顯示的a是第幾個(gè) //對(duì)所有的as進(jìn)行遍歷,看那個(gè)a的class類為current,然后獲得這個(gè)編號(hào) //i不能用來(lái)索引 //還要讓對(duì)應(yīng)的li添加there這個(gè)類名 for (i = 0; i < as.length; i++) { if (as[i].getAttribute('class') == 'current') { flag = i } } //如果flag=0;那么就讓flag=as.length的a的類變?yōu)閏urrent,如果flag>0,那么就讓flag-1的a的class變?yōu)閏urrent if (flag == 0) { //排他思想 for (i = 0; i < as.length; i++) { as[i].classList.remove('current') lis[i].classList.remove('there') } as[as.length - 1].classList.add('current') lis[as.length - 1].classList.add('there') e = as.length - 1 } if (flag > 0) { for (i = 0; i < as.length; i++) { as[i].classList.remove('current') lis[i].classList.remove('there') } as[flag - 1].classList.add('current') lis[flag - 1].classList.add('there') e = flag - 1 } fn(e) timer = setInterval(fun, [3000]) }) //類似的添加右邊按鈕的點(diǎn)擊事件 right.addEventListener('click', function() { window.clearInterval(timer) //左邊按鈕按下一次,圖片往右邊變化一張,相當(dāng)于要獲得當(dāng)前顯示的a是第幾個(gè) //對(duì)所有的as進(jìn)行遍歷,看那個(gè)a的class類為current,然后獲得這個(gè)編號(hào) //i不能用來(lái)索引 //還要讓對(duì)應(yīng)的li添加there這個(gè)類名 for (i = 0; i < as.length; i++) { if (as[i].getAttribute('class') == 'current') { flag = i } } //如果flag=as.length-1;那么就讓flag=0的a的類變?yōu)閏urrent,如果flag<as.length-1,那么就讓flag+1的a的class變?yōu)閏urrent if (flag == as.length - 1) { //排他思想 for (i = 0; i < as.length; i++) { as[i].classList.remove('current') lis[i].classList.remove('there') } as[0].classList.add('current') lis[0].classList.add('there') e = 0 } if (flag < as.length - 1) { for (i = 0; i < as.length; i++) { as[i].classList.remove('current') lis[i].classList.remove('there') } as[flag + 1].classList.add('current') lis[flag + 1].classList.add('there') e = flag + 1 } fn(e) timer = setInterval(fun, [3000]) }) //現(xiàn)在再給下面的小圓圈添加點(diǎn)擊事件 //當(dāng)按下小圓圈的時(shí)候獲得this,那么要獲得是第幾個(gè)小圓圈產(chǎn)生事件,需要自定義屬性一個(gè)編號(hào)。然后用這個(gè)編號(hào)去設(shè)置as[]的類 //自定義屬性 for (i = 0; i < lis.length; i++) { lis[i].setAttribute('index', i) } //添加事件,因?yàn)橐o每個(gè)小圓圈添加點(diǎn)擊事件,不如直接使用事件委托,將事件監(jiān)聽(tīng)器設(shè)置再ul上面,利用冒泡原理委托到li上 ul.addEventListener('click', function(e) { //為了全局性,直接使用flag window.clearInterval(timer) flag = (e.target.getAttribute('index')); if (flag) { for (i = 0; i < as.length; i++) { as[i].classList.remove('current') lis[i].classList.remove('there') } as[flag].classList.add('current') lis[flag].classList.add('there') } e = flag fn(e) timer = setInterval(fun, [3000]) }) //根據(jù)flag的值去改變box的url function fn(e) { if (e == 0) { nav.style.backgroundImage = 'url(https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&blur=40x20)' } if (e == 1) { nav.style.backgroundImage = 'url(https://p1.music.126.net/Q-GYxr6Opgmveo7cTulcOw==/109951167232940234.jpg?imageView&blur=40x20)' } if (e == 2) { nav.style.backgroundImage = 'url(https://p1.music.126.net/9lvqxXnb-uXiGE0n4ChJiA==/109951167232823192.jpg?imageView&blur=40x20)' } if (e == 3) { nav.style.backgroundImage = 'url(https://p1.music.126.net/GnAlY92neUdHWfAGwWz_cQ==/109951167232850389.jpg?imageView&blur=40x20)' } } }
關(guān)于“JavaScript怎么實(shí)現(xiàn)網(wǎng)易云輪播效果”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(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)容。