<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.overall{
width: 900px;
height: 500px;
align-items: center;
margin: 5% auto;
}
.content{
position: relative;
height: 400px;
}
.content ul{
list-style-type: none;
}
.content ul>li{
position: absolute;
width: 600px;
height: 300px;
transition: 1s;
opacity: 0;
}
.content ul>li img{
width: 900px;
height: 500px;
border-radius: 5%;
border: 5px solid pink;
}
.content ol{
position: relative;
display: grid;
grid-template-columns: repeat(3, 75px);
grid-template-rows: auto;
grid-gap: 1em;
gap:1em;
float:right;
margin-top: 450px;
list-style: none;
top: 0;
left: 0;
}
.content ol li{
width: 20px;
height: 20px;
font-size: 15px;
line-height: 20px;
float: left;
text-align: center;
border-radius: 2em;
border: 5px solid black;
}
</style>
</head>
<body>
<div class="overall">
<div class="content">
<ul>
<li><img src="./电锯人 (16).00_00_00_28.Still001_00000.png" alt=""></li>
<li><img src="./电锯人 (16).00_00_00_28.Still001_00038.png" alt=""></li>
<li><img src="./电锯人 (17).00_00_00_28.Still001_00000.png" alt=""></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script>
var content = this.document.getElementsByClassName("content")[0]
var li = content.getElementsByTagName("li")
function fun (i, j){
li[i].style.opacity = 1
li[j].style.opacity = 0
li[i+3].style.backgroundColor = "black"
li[j+3].style.backgroundColor = ""
}
fun(0, 1)
var i = 0
function auto(){
i++
if(i>=3){
i=0
fun(0,2)
}
else{
fun(i, i-1)
}
}
timer = this.setInterval(auto, 2000)
content.onmouseover = function(){
clearInterval(timer)
}
content.onmouseout = function(){
timer = setInterval(auto, 2000)
}
for(j=0;j<3;j++){
li[j+3].index = j
li[j+3].onclick = function(){
fun(this.index, i)
i = this.index
}
}
</script>
</body>
</html>
5210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
