功能简单,仅作新手练习,先上个图
HTML代码如下:
1.引入css和js
2.写几个必要的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS练习之切换图片</title>
<link rel="stylesheet" href="style.css">
<script src="js.js" ></script>
</head>
<body>
<p></p>
<img id="img" src="../img/1.jpg">
<div>
<span id="pre">上一张</span>
<span id="next">下一张</span>
</div>
</body>
</html>
JS代码如下:
1.浏览器加载代码是从上到下的,所以使用window.onload等标签加载完了在绑定事件
2.初始化参数
3.绑定点击上一张和下一张按钮事件,第一张的时候点击上一张就到最后一张,最后一张同理
window.onload = function() {
var p = document.getElementsByTagName('p')[0];
var imgs = ['../img/1.jpg','../img/2.jpg','../img/3.jpg','../img/4.jpg','../img/5.jpg'];
var cur = 0;
p.innerHTML = "当前是第"+(cur+1)+"张, 共有"+imgs.length+"张照骗";
document.getElementById('pre').onclick = function() {
document.getElementById('img').src = imgs[cur = (cur-1)<0 ? imgs.length-1 : cur-1];
p.innerHTML = "当前是第"+(cur+1)+"张, 共有"+imgs.length+"张照骗";
};
document.getElementById('next').onclick = function () {
document.getElementById('img').src = imgs[cur = (cur+1)===imgs.length ? 0 : cur+1];
p.innerHTML = "当前是第"+(cur+1)+"张, 共有"+imgs.length+"张照骗";
};
};
CSS代码如下:
1.没有使用button,个人比较喜欢使用span来制作按钮
*{
margin: 0;
padding: 0;
}
img{
width: 500px;
}
p, img, div{
display: flex;
justify-content: center;
text-align: center;
margin: 0 auto;
font-size: 20px;
}
body{
background-color: lightblue;
}
span{
border: 1px solid darkolivegreen;
margin: 10px;
padding: 3px 8px;
}
span:hover{
cursor: pointer;
}
p{
margin: 10px auto;
}