<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>作业5</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
position: relative;
}
.xk {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
overflow: hidden;
}
img {
width: 500px;
height: 500px;
display: block;
}
p {
position: absolute;
bottom: 10px;
left: 650px;
}
p span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.active {
background-color: blue;
}
#pre {
width: 30px;
height: 50px;
position: absolute;
top: 230px;
left: 434px;
}
#next {
width: 30px;
height: 50px;
position: absolute;
top: 230px;
left: 902px;
}
.num {
background-color: rgba(0, 0, 0, .3);
width: 500px;
height: 40px;
position: absolute;
top: 0;
left: 433px;
line-height: 40px;
text-align: center;
font-size: 22px;
color: white;
}
</style>
</head>
<body>
<div class="box">
<div class="xk">
<img src="./img/1.jpg" alt="" id="ima">
<!-- <img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt=""> -->
</div>
<p>
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</p>
<button id="pre"> < </button>
<button id="next"> > </button>
<div class="num">1/4</div>
</div>
<script>
var images = document.querySelectorAll("img")[0];
var spans = document.getElementsByTagName("span");
var pre1 = document.getElementById("pre");
var next1 = document.getElementById("next");
var im = document.getElementById("ima");
var num1 = document.getElementsByClassName("num")[0];
var xk = document.getElementsByClassName("xk")[0];
// 圆点控制图片和数字
for (var i = 0; i < spans.length; i++) {
spans[i].index = i;
spans[i].onmouseover = function () {
for (var i = 0; i < spans.length; i++) {
spans[i].className = "";
// images[i].style.display = "none";
// images.src = "./img/" + (i+1) + ".jpg";
}
// 把小圆点和按钮联系起来
a = this.index+1;
this.className = "active";
num1.innerHTML=this.index+1+"/4";
// images[this.index].style.display = "block";
images.src = "./img/" + (this.index+1) + ".jpg";
}
}
// 按钮控制图片数字和小圆点
var a = 1;
pre1.onclick = function () {
a--;
if (a < 1) {
a = 4;
}
im.src = "./img/" + a + ".jpg";
num1.innerHTML=a+"/4";
for (var i = 0; i < spans.length; i++) {
spans[i].className = "";
}
spans[a - 1].className = "active";
}
next1.onclick = function () {
a++;
if (a > 4) {
a = 1;
}
im.src = "./img/" + a + ".jpg";
num1.innerHTML=a+"/4";
for (var i = 0; i < spans.length; i++) {
spans[i].className = "";
}
spans[a - 1].className = "active";
}
// 自动切换 和右侧按钮方向是一致的,所以用一个变量
var timer = setInterval(auto,3000);
function auto(){
a++;
if (a > 4) {
a = 1;
}
im.src = "./img/" + a + ".jpg";
num1.innerHTML=a+"/4";
for (var i = 0; i < spans.length; i++) {
spans[i].className = "";
}
spans[a - 1].className = "active";
}
// 鼠标移入 定时器停止 离开定时器重新启动
xk.onmouseover = function(){
clearInterval(timer);
}
xk.onmouseout = function(){
timer = setInterval(auto,3000);
}
</script>
</body>
</html>
今天我学会了用定时器写轮播图
最新推荐文章于 2020-12-01 20:48:40 发布