溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JavaScript怎么實現網易云輪播效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript怎么實現網易云輪播效果”文章能幫助大家解決問題。
1、div寬度直接與瀏覽器界面寬度一致：width:100%
2、怎么讓圖片在一個絕對定位的盒子中垂直居中顯示？
繼續加絕對定位。然后改變top，和left的值
3、采用外置的js文件，需要等到頁面加載完畢：window.οnlοad=function(){}
4、添加和移除元素的類名：先獲取DOM對象，然后通過classList.add('current')（里面不需要加.）和classList.remove()即可添加類型和刪除類名。
5、事件委托： 比如有100個li，每個li都有相同的click點擊事件，可能我們會用for循環的方法，來遍歷所有的li，然后給它們添加事件。這樣會增加dom的交互次數 事件委托是利用事件的冒泡原理實現，事件從最深的節點開始，然后逐步向上傳播事件。頁面上有這么一個節點樹，div>ul>li>a;比如給最里面的a加一個click點擊事件，那么這個事件就會一層一層的往外執行，執行順序a>li>ul>div。當給最外面的div加點擊事件，那么里面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委托，委托它們父級代為執行事件。
6、js改變元素背景圖url：document.getElementById("元素id").style.backgroundImage="url(圖片路徑)";
7、js實現定時器的暫停與開啟：
var dsq = setInterval(gd,40)；oDiv.οnmοuseοver= function() //停止定時器實現暫停的效果
{ clearInterval(dsq); } oDiv.οnmοuseοut= function() //開啟定時器，實現重啟的效果
{ //setInterval(gd,40); 錯誤的示范\當多次點擊的時候，因為開辟了很多個定時器，效果就是一直跳動，看起來很像是因為沒有加節流閥的效果。 dsq=setInterval(gd,40);
//需要再開啟這個定時器，一定要在定時器前面加上你定義的那個定時器的變量名，如果不加的話就會又開啟一個新的定時器然后你上面的那個停止dsq定時器的函數是無法停止這個新的定時器的，當你鼠標不斷移入移出都會開啟一個新的定時器，多個定時器同時執行相同的動作，這樣相當于你的定時器里面的時間成倍的減少，效果就是你的定時器越來越快的執行，
}
<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> <!-- 盒子里面方圖片，可以通過左右按鈕改變圖片，同步的改變小圓圈的對應。不操作時會自動跳轉圖片--> <!-- 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;
/* 這個url地址需要根據img圖片的顯示來改變的 */
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() {
//定時器,自動改變圖片以及背景圖以及小圓圈
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的類變為current，如果flag<as.length-1,那么就讓flag+1的a的class變為current
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])
//點擊的時候需要先把定時器關閉
// 應該時根據img圖片(直接根據a鏈接吧）的數量來動態生成li
var as = document.querySelectorAll('a')
var ul = document.querySelector('ul')
var nav = document.querySelector('.nav')
for (i = 0; i < as.length; i++) {
// 創建元素
var li = document.createElement('li')
ul.appendChild(li)
//添加元素
}
//給按鈕添加點擊事件
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)
//左邊按鈕按下一次，圖片往左邊變化一張,相當于要獲得當前顯示的a是第幾個
//對所有的as進行遍歷，看那個a的class類為current，然后獲得這個編號
//i不能用來索引
//還要讓對應的li添加there這個類名
for (i = 0; i < as.length; i++) {
if (as[i].getAttribute('class') == 'current') {
flag = i
}
}
//如果flag=0；那么就讓flag=as.length的a的類變為current，如果flag>0,那么就讓flag-1的a的class變為current
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])
})
//類似的添加右邊按鈕的點擊事件
right.addEventListener('click', function() {
window.clearInterval(timer)
//左邊按鈕按下一次，圖片往右邊變化一張,相當于要獲得當前顯示的a是第幾個
//對所有的as進行遍歷，看那個a的class類為current，然后獲得這個編號
//i不能用來索引
//還要讓對應的li添加there這個類名
for (i = 0; i < as.length; i++) {
if (as[i].getAttribute('class') == 'current') {
flag = i
}
}
//如果flag=as.length-1；那么就讓flag=0的a的類變為current，如果flag<as.length-1,那么就讓flag+1的a的class變為current
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])
})
//現在再給下面的小圓圈添加點擊事件
//當按下小圓圈的時候獲得this,那么要獲得是第幾個小圓圈產生事件，需要自定義屬性一個編號。然后用這個編號去設置as[]的類
//自定義屬性
for (i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i)
}
//添加事件,因為要給每個小圓圈添加點擊事件，不如直接使用事件委托，將事件監聽器設置再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])
})
//根據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)'
}
}
}關于“JavaScript怎么實現網易云輪播效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
