简易的电子相册
2019-11-06 本文已影响0人
Tn299
点击“上一张”和“下一张”来切换图片
按下左键，切换上一张图片
按下右键，切换下一张图片
image.png
代码
<title>技能训练2：简易的电子相册</title>
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(e) {
var index=5;
$("#pre").click(function(){
if(index<=1){
index=1;
}else{
index--;
}
$("#pic").attr("src","images/"+index+".jpg");
});
$("#next").click(function(){
if(index>=5){
index=5;
}else{
index++;
}
$("#pic").attr("src","images/"+index+".jpg");
});
$(document).keydown(function(event){
if(event.keyCode==37){
if(index<=1){
index=1;
}else{
index--;
}
$("#pic").attr("src","images/"+index+".jpg");
};
if(event.keyCode==39){
if(index>=5){
index=5;
}else{
index++;
}
$("#pic").attr("src","images/"+index+".jpg");
}
});
});
</script>
</head>
<body>
<div style="text-align:center">
<img id="pic" src="images/1.jpg" width="300" height="400" />
<br/>
<input type="button" value="上一张" id="pre"/>
<input type="button" value="下一张" id="next"/>
</div>
</body>
