<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#slider{
width:200px; height:150px;
position:relative;
border:1px solid #555;
}
#slider>img{
position:absolute; top:0; left:0;
opacity:0;
transition:all .5s linear;
}
#slider>img.show{ opacity:1; z-index:10 }
</style>
</head>
<body>
<div id="slider">
<img src="images/1.jpg" class="show" alt="万紫千红"/>
<img src="images/2.jpg" alt="大漠戈壁"/>
<img src="images/3.jpg" alt="花团紧凑"/>
<img src="images/4.jpg" alt="海洋生物"/>
</div>
<script>
function task(){
//查找现在class为show的img
var img=slider.getElementsByClassName("show")[0];
//清空img的class
img.className="";
//如果img有下一个兄弟
if(img.nextElementSibling){
//设置img的下一个兄弟class为show
img.nextElementSibling.className="show";
}else{
//否则,设置img的父元素的第一个孩子className为show
img.parentNode.children[0].className="show";
}
}
var timer=setInterval(task,3000);
//当鼠标进入停止
slider.onmouseover=function(){
clearInterval(timer);
}
slider.onmouseout=function(){
timer=setInterval(task,3000);
}
var imgs=slider.children;
for (var img of imgs){
img.onclick=function(){
var imgs=this;
alert(imgs.alt);
}
}
</script>
</body>
</html>
实现图片淡入淡出效果
猜你喜欢
转载自blog.csdn.net/weixin_42103706/article/details/84137472
今日推荐
周排行