JavaScript-渐隐轮播图分解(上)

}

.circlelist .circle {

width: 10px;

height: 10px;

border-radius: 50%;

border: 2px solid #999;

background: #666;

margin: 5px;

}

.circlelist .circle.active {

background-color: #ccc;

border: 2px solid #666;

}

body 加入

var swiper = document.querySelectorAll(“.imaglist .imagitem”);

var leftbtn = document.querySelector(“.leftbtn”);

var rightbtn = document.querySelector(“.rightbtn”);

var circle = document.querySelectorAll(“.circle”);

var imagcount = 0;

rightbtn.onclick = function() {

imagcount = imagcount + 1;

if (imagcount >= swiper.length) {

//0 1 2 3

imagcount = 0;

}

xuanran();

};

leftbtn.onclick = function() {

imagcount = imagcount - 1;

if (imagcount < 0) {

//0 -1 -2 3

imagcount = swiper.length - 1;

}

xuanran();

};

circle.forEach(function(item, index) {

item.onclick = function() {

var i = parseInt(item.id[1]);

imagcount = i;

xuanran();

};

});

// for(var i = 0;i<circle.length;i++){

// circle[i].onclick = function(){

// imagcount = i;//传入i内部的一直是一个固定值

// xuanran();

// }

// }

//立即执行函数

// for(var i = 0;i<circle.length;i++){

// circle[i].onclick = (function(index){

// return function(){

// imagcount = index;

// xuanran();

// }

// })(i)

// }

function xuanran() {

console.log(imagcount);

swiper.forEach(function(item, index) {

item.classList.remove(“active”);

});

circle.forEach(function(item, index) {

item.classList.remove(“active”);

});

swiper[imagcount].classList.add(“active”);

circle[imagcount].classList.add(“active”);

}

//通过事件代理完成小圆点的功能

// var circlelist = document.querySelector(“.circlelist”)

// circle.onclick = function(event){

// if(event.target.classList.contains(“.circlelist”)){

// var i = parseInt(event.target.id[1]);

// imagcount = i;

// xuanran();

// }

// }

完整代码

<

三、实现轮播图轮播功能(下)

知识点