这是带有跳转地址的轮播图
html
css
.big {
width: 500px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#demo {
width: 500px;
height: 500px;
background: url(img/lyf1.jpg)center;
}
#dots {
width: 200px;
height: 20px;
/* background: purple; */
position: absolute;
bottom: 10px;
display: flex;
}
#dots li {
width: 20px;
height: 20px;
background: #fff;
margin: 0px 10px;
border-radius: 50%;
cursor: pointer;
}
#dots li.active {
background: hotpink;
}
.arrow {
width: 50px;
height: 80px;
background: hotpink;
display: none;
}
.arrow-left {
position: absolute;
left: 0px;
}
.arrow-right {
position: absolute;
right: 0px;
}
.big:hover .arrow {
display: block;
}
js
var timer = null
var index = 0
var demo = document.getElementById('demo')
var dots = document.getElementById('dots')
var arrowleft=document.getElementsByClassName('arrow-left')[0]
var arrowright=document.getElementsByClassName('arrow-right')[0]
var arr = [{
url: "https://music.163.com/#/song?id=1360626880",
color: "lyf1.jpg"
}, {
url: "https://music.163.com/#/song?id=1360627776",
color: "lyf2.jpg"
}, {
url: "https://music.163.com/#/song?id=1360626972",
color: "lyf3.jpg"
}, {
url: "https://music.163.com/#/song?id=862098091",
color: "lyf4.jpg"
}]
demo.onclick=function(){
location.href=arr[index].url
}
arrowleft.onclick=function(){
clearInterval(timer)
if(--index=== -1) index=arr.length - 1
changestyle()
run()
}
arrowright.onclick=function(){
clearInterval(timer)
if(++index=== arr.length) index=0
changestyle()
run()
}
arr.forEach(function (item, i) {
var li = document.createElement('li')
if (i === 0) li.classList.add('active')
dots.append(li)
li.onmouseover = function () {
clearInterval(timer)
index=i
changestyle()
}
li.onmouseout = function () {
run()
}
})
var run = function () {
timer = setInterval(function () {
if (++index === arr.length) index = 0
changestyle()
}, 2000)
}
var changestyle=function(){
demo.style['background-image'] = `url(img/${arr[index].color})`
var active = document.getElementsByClassName('active')[0]
active.classList.remove('active')
dots.children[index].classList.add('active')
}
run()