html自动旋转的圆环菜单,一个类环形旋转菜单实现？

Document

* {

margin: 0;

padding: 0;

}

html,

body,

.wrap {

width: 100%;

height: 100%;

}

.wrap {

position: fixed;

top: 0;

left: 0;

}

.annulus {

position: absolute;

top: -552px;

left: 0;

right: 0;

margin: auto;

width: 1000px;

height: 1000px;

border-radius: 50%;

border: 1px solid #ccc;

}

.annulus__bg {

position: absolute;

top: 0;

right: 0;

left: 0;

bottom: 0;

margin: auto;

border-radius: 50%;

width: 100%;

height: 100%;

background: #fff url(YaoMing.jpg) center center no-repeat;

border: 1px solid #ccc;

transition: all 0.5s linear;

}

.annulus__item {

position: absolute;

top: 0;

right: 0;

left: 0;

bottom: 0;

margin: auto;

width: 100px;

height: 100px;

border-radius: 50%;

background: #fff url(YaoMing.jpg) center center / cover no-repeat;

border: 1px solid #ccc;

transition: all 0.5s linear;

}

onload = () => {

var dataArr = [

"90|-90", "60|-60", "30|-30", "0|0", "-30|30", "-60|60", "-90|90"

], numArr = [

0, 1, 2, 3, 4, 5, 6

], lock = false;

document.querySelectorAll(".annulus__item").forEach((v, i) => {

document.querySelector(".annulus__item--" + numArr[i]).style.transform =

"rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";

v.addEventListener("click", function () {

if(lock) return false;

lock = true;

setTimeout(function() { lock = false; }, 500);

var content = numArr[3], target = /\d+$/.exec(this.className)[0];

if(+content + 1 == target || content - 6 == target) {

mainDeg += 30;

numArr.push(numArr.shift());

document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";

document.querySelector(".annulus__item--" + numArr[6]).style.transition = "none";

setTimeout(() => { document.querySelector(".annulus__item--" + numArr[6]).style.transition = "all 0.5s linear"; }, 0);

} else if (content - 1 == target || content + 6 == target) {

mainDeg -= 30;

numArr.unshift(numArr.pop());

document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";

document.querySelector(".annulus__item--" + numArr[0]).style.transition = "none";

setTimeout(() => { document.querySelector(".annulus__item--" + numArr[0]).style.transition = "all 0.5s linear"; }, 0);

}

for (var i = 0; i < 7; i++) {

document.querySelector(".annulus__item--" + numArr[i]).style.transform =

"rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";

}

});

});

var mainDeg = 0;

onkeydown = (event) => {

if (event.keyCode === 37) {

mainDeg += 30;

document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";

numArr.push(numArr.shift());

document.querySelector(".annulus__item--" + numArr[6]).style.transition = "none";

setTimeout(() => { document.querySelector(".annulus__item--" + numArr[6]).style.transition = "all 0.5s linear"; }, 0);

for (var i = 0; i < 7; i++) {

document.querySelector(".annulus__item--" + numArr[i]).style.transform =

"rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";

}

}

if (event.keyCode === 39) {

mainDeg -= 30;

document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";

numArr.unshift(numArr.pop());

document.querySelector(".annulus__item--" + numArr[0]).style.transition = "none";

setTimeout(() => { document.querySelector(".annulus__item--" + numArr[0]).style.transition = "all 0.5s linear"; }, 0);

for (var i = 0; i < 7; i++) {

document.querySelector(".annulus__item--" + numArr[i]).style.transform =

"rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";

}

}

}

}

上代码,把图片换一下就可以了

很简陋,抛砖引玉用