JS 实现图片上下张切换
思路：利用js切换图片，即修改img标签中的src属性即可。
body中相关设置
- 文本提示块（提示当前图片为第几张，共几张图片）
- 图片块（放置图片）
- 两个按钮（切换上下张按钮）
<body>
<div id='outer'>
<p id='info'></p>
<img src="img/1.png" alt='11'>
<button id='prev'>上一张</button>
<button id='next'>下一张</button>
</div>
</body>
css样式简单设置
<style>
*{
margin: 0px;
padding: 0px;
}
img{
width: 600px;
height: 400px;
}
#outer{
width:600px;
margin: 50px auto;
padding: 10px;
background-color: #FF8C00;
text-align: center;
}
button{
width: 100px;
height: 30px;
border-radius: 5px;
background: green;
color: #fff;
}
button:active {
background: red;
border:1px solid #000;
color: #000;
font-weight: bold;
}
</style>
js主要部分
- 首先根据id属性获取到p、img图片、button按钮
- 要明白是当按钮点击时才开始切换，所以要用到onclick事件
- 还要明白，因文档加载顺序问题，所以js的所有代码要写在**window.onload = function(){};**之中。否则，就将script标签写在body中。
- 创建一个图片路径数组，防止所有图片
- 创建index变量，保存当前正在显示的图片索引
- 上一张：index–
- 下一张：index++
- 但当切换到最后一张上一张时要改变index值为数组长度-1
- 当切换到最后一张下一张时要改变index值为0
- 最后设置提示文字
<script type="text/javascript">
window.onload = function(){
var prev = document.getElementById('prev');
var next = document.getElementById('next');
// 获取img标签
var img = document.getElementsByTagName('img')[0];
// 创建一个数组，用来保存图片的路径
var imgArr = ['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];
// 创建一个变量，保存当前正在显示的图片索引
var index =0;
// 设置提示文字
var info = document.getElementById('info');
var num=index+1;
info.innerHTML = num +'/' + imgArr.length;
// 上一张
prev.onclick = function(){
// 切换图片
index--;
if(index<0){
index=imgArr.length-1;
}
img.src = imgArr[index];
// 设置提示文字
num = index+1;
info.innerHTML = num +'/' + imgArr.length;
};
// 下一张
next.onclick = function(){
// 切换图片
index++;
if(index>imgArr.length-1){
index=0;
}
img.src = imgArr[index];
// 设置提示文字
num = index+1;
info.innerHTML = num +'/' + imgArr.length;
};
};
</script>
效果图
图片素材原图
是我喜欢的王安宇小哥哥，嘻嘻～
完整代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>js实现图片切换-wanjunY</title>
<style>
*{
margin: 0px;
padding: 0px;
}
img{
width: 600px;
height: 400px;
}
#outer{
width:600px;
margin: 50px auto;
padding: 10px;
background-color: #FF8C00;
text-align: center;
}
button{
width: 100px;
height: 30px;
border-radius: 5px;
background: green;
color: #fff;
}
button:active {
background: red;
border:1px solid #000;
color: #000;
font-weight: bold;
}
</style>
<script type="text/javascript">
window.onload = function(){
var prev = document.getElementById('prev');
var next = document.getElementById('next');
// 获取img标签
var img = document.getElementsByTagName('img')[0];
// 创建一个数组，用来保存图片的路径
var imgArr = ['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];
// 创建一个变量，保存当前正在显示的图片索引
var index =0;
// 设置提示文字
var info = document.getElementById('info');
var num=index+1;
info.innerHTML = num +'/' + imgArr.length;
// 上一张
prev.onclick = function(){
// 切换图片
index--;
if(index<0){
index=imgArr.length-1;
}
img.src = imgArr[index];
// 设置提示文字
num = index+1;
info.innerHTML = num +'/' + imgArr.length;
};
// 下一张
next.onclick = function(){
// 切换图片
index++;
if(index>imgArr.length-1){
index=0;
}
img.src = imgArr[index];
// 设置提示文字
num = index+1;
info.innerHTML = num +'/' + imgArr.length;
};
};
</script>
</head>
<body>
<div id='outer'>
<p id='info'></p>
<img src="img/1.png" alt='11'>
<button id='prev'>上一张</button>
<button id='next'>下一张</button>
</div>
</body>
</html>