diff --git "a/52\345\217\267 \347\250\213\345\270\205\347\277\224/11.10.md" "b/52\345\217\267 \347\250\213\345\270\205\347\277\224/11.10.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/52\345\217\267 \347\250\213\345\270\205\347\277\224/11.9.md" "b/52\345\217\267 \347\250\213\345\270\205\347\277\224/11.9.md" new file mode 100644 index 0000000000000000000000000000000000000000..12f0b6142c9c41b75f22629dabfaf40c43102d78 --- /dev/null +++ "b/52\345\217\267 \347\250\213\345\270\205\347\277\224/11.9.md" @@ -0,0 +1,61 @@ +# 作业 + +```js +// 获取元素 + let img=document.querySelector('.slider-wrapper img'); + let p=document.querySelector('.slider-footer p'); + let colo=document.querySelector('.slider-footer'); + let shan=document.querySelector('.toggle .prev'); + let xia=document.querySelector('.toggle .next'); +//通用函数 + function nb(){ + img.src=data[i].url; + p.innerHTML=data[i].title; + colo.style.backgroundColor=data[i].color; + document.querySelector(`.slider-indicator .active`).classList.remove('active'); + document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active'); + } +//自动轮播 + let i=0; + let set=setInterval(function (){ + i++; + if (i>=data.length) { + i=0; + } + nb() + },1000); +//鼠标移入 +colo.addEventListener('mouseenter',function(){ + clearInterval(set); + }); +//鼠标离开 +colo.addEventListener('mouseleave',function(){ + set=setInterval(function(){ + i++; + if (i>=data.length) { + i=0; + } + img.src=data[i].url; + p.innerHTML=data[i].title; + colo.style.backgroundColor=data[i].color; + document.querySelector(`.slider-indicator .active`).classList.remove('active'); + document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active'); + },1000); + }); +//点击下一张 +xia.addEventListener('click',function(){ + i++; + if (i>=data.length) { + i=0; + } + nb() +}); +//点击上一张 +shan.addEventListener('click',function(){ + + if (i<=0) { + i=data.length; + } + i--; + nb() +}); \ No newline at end of file