<body>
<div class="slider">
<div class="slider-wrapper">
<img src="./test1.png" alt="" />
<div class = "box">X</div>
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了?</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div_class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
<script>
const sliderData = [
{url:'./test1.png',title:'对人类来说会不会太超前了?',color:'rgb(47,37,28)'},
{url:'./test2.png',title:'开启剑与雪的黑暗传说!',color:'rgb(43,35,26)'},
{url:'./test3.png', title:'真正的jo厨出现了!',color:'rgb(36,31,33)'},
{url:'./test4.png', title:'李玉刚:让世界通过B站看到东方大国文化',color:'rgb(139,98,66)'},
{url:'./test5.png', title:'龙脉传奇!',color:'rgb(36,31,33)'},
]
const buttonr = document.querySelector('.next')
const buttonl = document.querySelector('.prev')
const img = document.querySelector('.slider-wrapper img')
const title = document.querySelector('.slider-footer p')
const backgrounds = document.querySelector('.slider-footer')
buttonl.style.backgroundColor = "red"
buttonr.style.backgroundColor = "olive"
const box = document.querySelector('.slider')
let i = 0
buttonr.addEventListener('click',function(){
i++
if(i>=sliderData.length){
i = 0
}
common()
})
buttonl.addEventListener('click',function(){
i--
if(i < 0){
i = sliderData.length - 1
}
common()
})
function common(){
console.log(sliderData[i])
img.src = sliderData[i].url
title.innerHTML = sliderData[i].title
backgrounds.style.backgroundColor= sliderData[i].color
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
let fn = setInterval(function(){
buttonr.click()
},1000)
box.addEventListener('mouseenter',function(){
clearInterval(fn)
})
box.addEventListener('mouseleave',function(){
fn = setInterval(function(){
buttonr.click()
},1000)
})
</script>
</body>
标签：function,const,img,title,querySelector,case1,document,sliderData From： https://www.cnblogs.com/JASON-yul/p/18153579