图片轮播，淡入淡出(js,css)

来源：互联网发布：刺客信条起源知乎编辑：程序博客网时间：2024/04/28 08:09

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#d1>img {position: absolute;opacity: 0;transition: all .5s linear;}#d1>img.show { /* 这里必须用#d1>img，不然优先级不够 */z-index: 10; /* 必须用z-index:10;不然后面的图片覆盖前面的 */opacity: 1;}</style></head><body><div id="d1"><img src="img/banner1.png" alt="" class="show"><img src="img/banner2.png" alt=""><img src="img/banner3.png" alt=""><img src="img/banner4.png" alt=""></div><script>function task() {var img = document.querySelector(".show");img.className = "";//console.log(img.nextSibling);//console.log(img.nextElementSibling);  if(img.nextElementSibling!=null){img.nextElementSibling.className="show";}else{document.querySelector("#d1>:first-child").className="show";}}var timer = setInterval("task()",1000);d1.onmouseover = function() {clearInterval(timer);timer=null;}d1.onmouseout = function() {timer = setInterval("task()",1000); //这里前面不能加var，不然就会新建一个定时器，造成图片轮播切换混乱}</script></body></html>

里面尤需注意的是：nextSibling和nextElementSibling的区别，nextSibling是指下一个兄弟节点，nextElementSibling是指下一个兄弟元素。

阅读全文

0 0