第JavaScript模擬實(shí)現(xiàn)網(wǎng)易云輪播效果/*這個(gè)url地址需要根據(jù)img圖片的顯示來改變的*/

background-image:url(/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpgimageViewblur=40x20);

background-repeat:no-repeat;

background-size:100%;

.right,

.left{

width:80px;

height:120px;

position:absolute;

top:210px;

right:-80px;

.left{

left:-80px;

.rightimg,

.leftimg{

position:absolute;

top:25px;

left:15px;

width:50px;

height:70px;

.left:hover,

.right:hover{

background-color:rgba(0,0,0,0.5);

cursor:pointer;

width:600px;

height:100px;

position:absolute;

bottom:-20px;

left:340px;

ulli{

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);

ulli:hover{

color:red

width:1200px;

height:500px;

display:none;

.current{

display:block;

}

window.onload=function(){

//定時(shí)器,自動(dòng)改變圖片以及背景圖以及小圓圈

vartimer=window.setInterval(fun,[3000])

functionfun(){

for(i=0;ias.length;i++){

if(as[i].getAttribute('class')=='current'){

flag=i

//如果flag=as.length-1；那么就讓flag=0的a的類變?yōu)閏urrent，如果flagas.length-1,那么就讓flag+1的a的class變?yōu)閏urrent

if(flag==as.length-1){

//排他思想

for(i=0;ias.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(flagas.length-1){

for(i=0;ias.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ù)量來動(dòng)態(tài)生成li

varas=document.querySelectorAll('a')

varul=document.querySelector('ul')

varnav=document.querySelector('.nav')

for(i=0;ias.length;i++){

//創(chuàng)建元素

varli=document.createElement('li')

ul.appendChild(li)

//添加元素

//給按鈕添加點(diǎn)擊事件

varflag

varleft=document.querySelector('.left')

varright=document.querySelector('.right')

varlis=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不能用來索引

//還要讓對(duì)應(yīng)的li添加there這個(gè)類名

for(i=0;ias.length;i++){

if(as[i].getAttribute('class')=='current'){

flag=i

//如果flag=0；那么就讓flag=as.length的a的類變?yōu)閏urrent，如果flag0,那么就讓flag-1的a的class變?yōu)閏urrent

if(flag==0){

//排他思想

for(i=0;ias.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(flag0){

for(i=0;ias.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不能用來索引

//還要讓對(duì)應(yīng)的li添加there這個(gè)類名

for(i=0;ias.length;i++){

if(as[i].getAttribute('class')=='current'){

flag=i

//如果flag=as.length-1；那么就讓flag=0的a的類變?yōu)閏urrent，如果flagas.length-1,那么就讓flag+1的a的class變?yōu)閏urrent

if(flag==as.length-1){

//排他思想

for(i=0;ias.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(flagas.length-1){

for(i=0;ias.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;ilis.length;i++){

lis[i].setAttribute('index',i)

//添加事件,因?yàn)橐o每個(gè)小圓圈添加點(diǎn)擊事件，不如直接使用事件委托，將事件監(jiān)聽器設(shè)置再ul上面，利用冒泡原理委托到li上

ul.addEventListener('click',function(e){//為了全局性，直接使用flag

window.clearInterval(timer)

flag=(e.target.getAttribute('index'));

if(flag){

for(i=0;ias.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

functionfn(e){

if(e==0){

nav.style.backgroundImage='url(/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpgimageViewblur=40x20)'

if(e==1){

nav.style.backgroundImage='url(/Q-GYxr6Opgmveo7cTulcOw==/109951167232940234.jpgimageViewblur=40x20)'

if(e==2){

nav.style.backgroundImage='