<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
#d1{}
#d2 img{margin: 18px;}
</style>
</head>
<body>
<div id="d1">
<img src="img/picture-1.jpg"/>
</div>
<!--<img src="img/picture-1.jpg"/>-->
<!--<img src="img/picture-2.jpg" />-->
<!--<img src="img/picture-3.jpg" /-->
<div id="d2">
<img class="i1" src="img/thumb-1.jpg"/>
<img class="i1" src="img/thumb-2.jpg" />
<img class="i1" src="img/thumb-3.jpg" />
</div>
</body>
</html>
<script type="text/javascript">
d1 = document.getElementById('d1')
imgs = document.getElementsByClassName('i1')
for (x in imgs){
if (x=='length'){
break
}
if(x==0){
imgs[x].onmouseover = function(){
d1.innerHTML=''
img_2 = document.createElement('img')
img_2.src = "img/picture-1.jpg"
d1.appendChild(img_2)
}
}
if(x==1){
imgs[x].onmouseover = function(){
d1.innerHTML=''
img_2 = document.createElement('img')
img_2.src = "img/picture-2.jpg"
d1.appendChild(img_2)
}
}
if(x==2){
imgs[x].onmouseover = function(){
d1.innerHTML=''
img_2 = document.createElement('img')
img_2.src = "img/picture-3.jpg"
d1.appendChild(img_2)
}
}
}
</script>
QQ图片20190521205717.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
button:focus{outline: none;}
button{height: 15px;width: 30px;border: 0;background-color: black;;cursor: pointer;}
</style>
</head>
<body>
<div id="d1" align="center" >
<img id="img1" src="img/slide-1.jpg"/>
<!--<img src="img/slide-2.jpg" alt="" />-->
<!--<img src="img/slide-3.jpg" alt="" />-->
<!--<img src="img/slide-4.jpg" alt="" />-->
</div>
<div id="d2" align="center">
<button id="b1"></button>
<button id="b2"></button>
<button id="b3"></button>
<button id="b4"></button>
</div>
</body>
</html>
<script type="text/javascript">
b1 = document.getElementById('b1')
b2 = document.getElementById('b2')
b3 = document.getElementById('b3')
b4 = document.getElementById('b4')
d1 = document.getElementById('d1')
img1 = document.getElementById('img1')
x=0
t1 = setInterval(function(){
x++
b1.style.backgroundColor='blueviolet'
b2.style.backgroundColor='black'
b3.style.backgroundColor='black'
b4.style.backgroundColor='black'
if(x==2){
b1.style.backgroundColor='black'
b2.style.backgroundColor='blueviolet'
b3.style.backgroundColor='black'
b4.style.backgroundColor='black'
}
if(x==3){
b1.style.backgroundColor='black'
b2.style.backgroundColor='black'
b3.style.backgroundColor='blueviolet'
b4.style.backgroundColor='black'
}
if(x==4){
b1.style.backgroundColor='black'
b2.style.backgroundColor='black'
b3.style.backgroundColor='black'
b4.style.backgroundColor='blueviolet'
}
if (x==5){
x=1
}
console.log(x)
img1.src =`img/slide-${x}.jpg`
},2000)
b1.onclick = function(){
img1.src = "img/slide-1.jpg"
b1.style.backgroundColor='blueviolet'
b2.style.backgroundColor='black'
b3.style.backgroundColor='black'
b4.style.backgroundColor='black'
x=1
}
b2.onclick = function(){
img1.src = "img/slide-2.jpg"
b1.style.backgroundColor='black'
b2.style.backgroundColor='blueviolet'
b3.style.backgroundColor='black'
b4.style.backgroundColor='black'
x=2
}
b3.onclick = function(){
img1.src = "img/slide-3.jpg"
b1.style.backgroundColor='black'
b2.style.backgroundColor='black'
b3.style.backgroundColor='blueviolet'
b4.style.backgroundColor='black'
x=3
}
b4.onclick = function(){
img1.src = "img/slide-4.jpg"
b1.style.backgroundColor='black'
b2.style.backgroundColor='black'
b3.style.backgroundColor='black'
b4.style.backgroundColor='blueviolet'
x=4
}
</script>
QQ图片20190521205648.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
#d1{height: 580px;border: 1px solid black;margin-left:20% ;margin-right:20% ;}
button{font-size: 20px;}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2" align="center">
<button id="b1">添加</button>
<button id="b2">闪烁</button>
</div>
</body>
</html>
<script type="text/javascript">
function col(){
red = parseInt(Math.random()*255)
green = parseInt(Math.random()*255)
blue = parseInt(Math.random()*255)
color = rgb(red,green,blue)
return color
}
d1 = document.getElementById('d1')
b1 =document.getElementById('b1')
b2 = document.getElementById('b2')
count = 0
b1.onclick = function(){
count++
if (count<=25){
red = parseInt(Math.random()*255)
green = parseInt(Math.random()*255)
blue = parseInt(Math.random()*255)
d3 = document.createElement('div')
d3.style ='width:20%;height:20%;border:0;float:left;'
d3.style.backgroundColor =`rgb(${red},${green},${blue})`
d1.appendChild(d3)
}
}
divs = d1.children
console.log(divs)
flag = false
b2.onclick = function(){
if (! flag){
b2.innerText='暂停'
t2 = setInterval(function(){
for (x=0;x<divs.length;x++)
{
red = parseInt(Math.random()*255)
green = parseInt(Math.random()*255)
blue = parseInt(Math.random()*255)
divs[x].style.backgroundColor = `rgb(${red},${green},${blue})`
}
},500)
flag=true
}
else{
b2.innerText='闪烁'
clearInterval(t2)
flag=false
}
}
</script>
QQ图片20190522114250.png
