动态图片切换

最新推荐文章于 2022-07-05 15:35:21 发布

weixin_30838921

最新推荐文章于 2022-07-05 15:35:21 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/liwentao/p/7044263.html

版权

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
display: block;
}
</style>
<script>
/**
* 需求
* 点击下一张按钮。让图片切换成下一张图
* 点击上一张按钮，让图片切换成下一张图
*
* 分析
* 1、获取下一张按钮、图片
* 2、给按钮添加点击事件
* 1、用属性操作的方法去修改图片的src
* 2、把数字存到一个变量理，点击下一张，就让这个变量加1。用字符串拼接的方法修改图片的
* src属性
*
* 累加
* n=n+1
* n+=1
* n++
*/
window.οnlοad=function(){
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var pic=document.getElementById("pic");
var n=1;
//console.log(pic); //null
//下一张按钮点击事件
next.οnclick=function(){
//点击下一张让n加个1
//n=n+1;
//n+=1;
n++;
//console.log(n);
if(n>4){
n=4;
alert("已经没有更多了！");
return;
}
pic.src='img/'+n+'.jpg';
};
//上一张的点击事件
prev.οnclick=function(){
//点上一张按钮后要让图片递减
n--;
if(n<1){
n=1;
alert("已经没有更多了！");
return;
}
pic.src='img/'+n+'.jpg';
}
};
</script>
</head>
<body>
<input type="button" id="prev" value="上一张"/>
<input type="button" id="next" value="下一张" />
<img src="img/1.jpg" id="pic" alt=""/>
</body>
</html>

数组图片切换方法

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
display: block;
}
</style>
<script>
/**
* 需求
* 点击下一张按钮。让图片切换成下一张图
* 点击上一张按钮，让图片切换成下一张图
*
* 分析
* 1、获取下一张按钮、图片
* 2、给按钮添加点击事件
* 1、用属性操作的方法去修改图片的src
* 2、把数字存到一个变量理，点击下一张，就让这个变量加1。用字符串拼接的方法修改图片的
* src属性
*
* 累加
* n=n+1
* n+=1
* n++
*/
window.οnlοad=function(){
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var pic=document.getElementById("pic");
var n=0;
//把每个图片的名字存到数组中
var imgArr=['aba','abb','abc','abd'];
//console.log(pic); //null
//下一张按钮点击事件
next.οnclick=function(){
//点击下一张让n加个1
//n=n+1;
//n+=1;
n++;
//console.log(n);
if(n>imgArr.length-1){
n=imgArr.length-1;
alert("已经没有更多了！");
return;
}
pic.src='img/'+imgArr[n]+'.jpg';
};
//上一张的点击事件
prev.οnclick=function(){
//点上一张按钮后要让图片递减
n--;
if(n<0){
n=0;
alert("已经没有更多了！");
return;
}
pic.src='img/'+imgArr[n]+'.jpg';
}
};
</script>
</head>
<body>
<input type="button" id="prev" value="上一张"/>
<input type="button" id="next" value="下一张" />
<img src="img/aba.jpg" id="pic" alt=""/>
</body>
</html>

转载于:https://www.cnblogs.com/liwentao/p/7044263.html

weixin_30838921

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态图片切换

<html> <head> <meta charset="UTF-8"> <title></title> <style> img{ display: block; } </style> <script> /** * 需求 * 点击下一张按钮。让图片切换成下一张图...
复制链接

扫一扫