<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
div {
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
}
img {
width: 500px;
height: 300px;
}
button {
width: 20px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
color: pink;
border: 0;
}
.left {
position: absolute;
top: 50%;
left: 0;
margin-top: -25px;
}
.right {
position: absolute;
top: 50%;
right: 0;
margin-top: -25px;
}
h1 {
position: absolute;
top: 0;
left: 50%;
font-size: 16px;
margin-left: -8px;
color: red;
}
em {
font-style: normal;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -8px;
color: red;
}
ul {
width: 100px;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
margin-left: -50px;
bottom: 0px;
}
li {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
margin-bottom: 15px;
}
.active {
background-color: pink;
}
</style>
</style>
</head>
<body>
<div>
<img src="../作业/img/1.webp" alt="">
<button class="left">< </button>
<button class="right"> > </button>
<h1>1/4</h1>
<em>动漫1</em>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var img = document.getElementsByTagName("img")[0]
var btn = document.getElementsByTagName("button")
var h1 = document.getElementsByTagName("h1")[0]
var em = document.getElementsByTagName("em")[0]
var li = document.getElementsByTagName("li")
var arr = ["../作业/img/1.webp", "../作业/img/2.webp", "../作业/img/3.webp", "../作业/img/4.webp"]
var n = 1
btn[1].onclick = function () {
timer()
}
btn[0].onclick = function () {
n--
if (n < 1) {
n = 4
}
img.src = arr[n - 1]
h1.innerHTML = n + "/4"
em.innerHTML = "动漫" + n
for (var i = 0; i < li.length; i++) {
li[i].className = ""
}
li[n - 1].className = "active"
}
for (var i = 0; i < li.length; i++) {
li[i].index=i
li[i].onclick = function () {
for (var j = 0; j < li.length; j++) {
li[j].className = ""
}
this.className = "active"
var a = this.index
img.src=arr[a]
h1.innerHTML=a+1+"/4"
em.innerHTML="动漫"+(a+1)
}
}
function timer(){
n++
if (n > 4) {
n = 1
}
img.src = arr[n - 1]
h1.innerHTML = n + "/4"
em.innerHTML = "动漫" + n
for (var i = 0; i < li.length; i++) {
li[i].className = ""
}
li[n - 1].className = "active"
}
var time = setInterval(timer,3000)
img.onmouseover=function(){
clearInterval(time)
}
img.onmouseout=function(){
time = setInterval(timer,3000)
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
