本文主要是介绍图片轮播，淡入淡出(js,css)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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是指下一个兄弟元素。
这篇关于图片轮播，淡入淡出(js,css)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
