图片的自动切换与手动切换：
1、自动切换：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 400px;
height: 300px;
background: url("images/c0.jpg") center/cover;
}
</style>
</head>
<body>
<div id="d1"></div>
<script>
var b=1;
//箭头函数就是正常函数的简写
setInterval(()=>{
//操作元素（html）的css
d1.style.backgroundImage='url("images/c'+(b%3)+'.jpg")'
b++;
},1000)
function fn1(){
//操作属性
m1.src="images/c2.jpg"
}
</script>
</body>
</html>2、手动切换：
<div id="d1"></div>
<img align=center/over id="m1" src="images/c1.jpg" alt="" width="200px" height=""
<button onclick="fn1()">点我更改图片</button>
<script>
var b=1;
//箭头函数就是正常函数的简写
setInterval(()=>{
//操作元素（html）的css
d1.style.backgroundImage='url("images/c'+(b%3)+'.jpg")'
b++;
},1000)
function fn1(){
//操作属性
m1.src="images/c2.jpg"
}
</script点击更换单个与多个个颜色：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 50px;
background:red;
display: inline-block;
}
</style>
</head>
<body>
<div id="d1" class="a"></div>
<div id="d2" class="a"></div>
<div id="d3"></div>
<br>
<button onclick="fn1()">id）更改颜色</button>
<button onclick="fn2()">标签）更改颜色</button>
<button onclick="fn3()">类）更改颜色</button>
<br>
<input type="text" onfocus="" onblur="">
<script>
function fn1() {
var d=document.getElementById("d1")
d.style.background="yellow"
}
function fn2() {
var ds=document.getElementsByTagName("div")
for(var i=0;i<ds.length;i++){
ds[i].style.background="pink"
}
for(var i of ds){
i.style.background="Purple"
}
}
function fn3() {
var ds = document.getElementsByClassName("a")
for(var i of ds){
i.style.background="yellow"
}
}
</script>
</body>
</html>
如有疑问，可以私信于我。
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
