实现效果：
桃夭
思路：
实现两张图片相互切换，有很多种思路，例如1.使用JS动态的改变图片的通明度。2.可以使用隐藏，显示元素的属性：display，visibility。在这里，我使用JS动态的改变图片标签的src属性值。具体步骤如下：
1.创建一个旗帜变量，并赋值（要在方法之外）。
2.在方法中使用条件判断。
3.随着旗帜变量值的变化，改变图片标签的src属性值。切换不同的图片
4.使用定时器，每一秒钟调用一次这个方法，达到切换效果。
HTML代码：
<body>
<div class="box">
<img id="img" src="../imgs/6.jpg" alt=""/>
</div>
</body>
CSS代码：
*{
margin:0;
padding:0;
}
body{
background-color:black;
}
.box>img{
width:298px;
height:500px;
margin-top:50px;
margin-left:500px;
border-left:2px solid rgba(255,255,255,0.8);
border-top:2px solid rgba(255,255,255,0.8);
border-right:5px solid rgba(255,255,255,0.8);
border-bottom:5px solid rgba(255,255,255,0.8);
border-radius: 20px;
}
JS代码：
var flag = true;
var change = function(){
var img = document.getElementById("img");
if(flag){
img.src="../../imgs/5.jpg";
flag = false;
}else{
img.src="../../imgs/6.jpg";
flag = true;
}
}
setInterval(() => {
change();
}, 1000);
本文含有隐藏内容，请 开通VIP 后查看